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

演示： https://jsfiddle.net/davidliang2008/hdL0723p/39/

bootstrap-4 datatables tablesorter