引导4-如何根据ASC/DESC对箭头图标更改颜色的表进行排序
我想在asc和desc order.Basically中对表进行排序，当我单击fa-排序-asc时，应该突出显示，而fa-排序-desc应该是灰色的，反之亦然。请帮助我如何在引导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>
回答 1
Stack Overflow用户
发布于 2020-09-24 22:14:30
首先，您的操作不使用可数据，也不使用引导。它使用的是jquery.tablesorter，所以我不知道这是怎么回事。如果计划使用tablesorter而不是带有Bootstrap的数据，则可能需要更新标记。
其次，似乎您的jsfiddle演示缺少了jQuery，并将主题设置为“引导”。您读过关于如何在文档中使用引导主题的tablesorter.js吗？
第三，在tablesorter引导主题演示上，作者说
引导v4.x不再包含字体或图像，所以我没有费心在这个演示页面中包括字体( Font )图标。
也许这就是为什么向上/向下箭头没有出现的原因，因为tablesorter.js使用图像来排序图标。
现在，为了添加排序图标(可能来自Font‘s)，您不能真正更改标题结构并在其中添加图标。这里的诀窍是使用:before和:after of .tablesorter-header来使用content \f0de (Font箭头)和\f0dd (Font箭头)：
.tablesorter-header {
position: relative; /* This is needed for the absolute positioning. */
}
.tablesorter-header::before,
.tablesorter-header::after {
position: absolute;
right: 0.75em;
font-family: 'FontAwesome'; /* Use FontAwesome's font so that you can set the content */
opacity: 0.3; /* Set opacity to gray out icons by default */
}
.tablesorter-header::before {
content: '\f0de'; /* Font Awesome's up arrow */
top: calc(50% - 0.75em); /* Tricky to calculate the top offset */
}
.tablesorter-header::after {
content: '\f0dd'; /* Font Awesome's down arrow */
bottom: calc(50% - 0.75em);
}
.tablesorter-header.tablesorter-headerAsc::before,
.tablesorter-header.tablesorter-headerDesc::after {
opacity: 1; /* When sorting, set full opacity on the direction */
}
https://stackoverflow.com/questions/64010741
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号