如何解决Bootstrap 4-如何根据ASC / DESC对带有更改颜色的箭头图标的表进行排序
我想按asc和desc的顺序对表进行排序。基本上,当我单击fa-sort-asc时,应突出显示,而fa-sort-desc应变灰,反之亦然。 请帮助我如何在Bootstrap 4中实现此目标。有一些示例,但是当ASC排序完成时,缺少向下箭头。
我也尝试过使用数据表,但是我没有运气。请帮助我,我需要添加什么以使颜色突出显示启用排序
<!DOCTYPE html>
<html>
<head>
<Meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src=" https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css"></script>
<script src="https://cdn.datatables.net/1.10.22/css/dataTables.bootstrap4.min.css">
</script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js">
</script>
<script src="https://cdn.datatables.net/1.10.22/js/dataTables.bootstrap4.min.js">
</script>
</head>
<body>
<div class="container">
<table id="dtBasicExample" class="table table-striped table-bordered table-sm" cellspacing="0" width="100%">
<thead>
<tr>
<th class="th-sm">ID
</th>
<th class="th-sm">Age
</th>
<th class="th-sm">Name
</th>
</tr>
</thead>
<tbody>
<tr>
<td>5</td>
<td>19</td>
<td>Germany</td>
</tr>
<tr>
<td>20</td>
<td>23</td>
<td>San Franisco</td>
</tr>
<tr>
<td>7</td>
<td>28</td>
<td>London</td>
</tr>
</tbody>
</table>
</div>
<script>
$(document).ready(function() {
// $('#dtBasicExample').DataTable();
});
</script>
</body>
</html>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
演示: https://jsfiddle.net/saranya2020/kgp68vuh/7/
解决方法
首先,您的jsfiddle没有使用datatables,也没有使用Bootstrap。它正在使用jquery.tablesorter,所以我不知道这是怎么回事。如果您打算使用Tablesorter代替带Bootstrap的数据表,则可能需要更新标签。
第二,似乎您的jsfiddle演示缺少jQuery,并将主题设置为“ bootstrap”。您是否已阅读documentation有关如何在tablesorter.js中使用引导程序主题的信息?
第三,来自tablesorter bootstrap theme demo的作者说
Bootstrap v4.x不再包含字体或图像,因此在此演示页面上,我再也没有添加“字体真棒”图标。
也许这就是为什么向上/向下箭头不显示的原因,因为tablesorter.js使用图像作为排序图标。
现在,为了添加排序图标(也许来自Font Awesome的图标),您不能真正更改标题结构并在其中添加图标。这里的技巧是为:before
的{{1}}和:after
设置样式,以使用内容.tablesorter-header
(字体真棒上箭头)和\f0de
(字体真棒下箭头):
\f0dd
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。