Bootstrap 4-如何使用基于 ASC/DESC 改变颜色的箭头图标对 table 进行排序

Question

我想在 asc 和 desc order.Basically 中对 table 进行排序，当我单击 fa-sort-asc 时，这应该突出显示并且 fa-sort-desc 应该变灰，副-反之亦然。请帮助我如何在 Bootstrap 4 中实现这一点。有示例，但是当完成 ASC 排序时，向下箭头丢失。

我也试过数据tables，但我没有运气。请帮助我我需要添加什么来使排序启用颜色突出显示

<!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/

Answer 1

首先，您的 jsfiddle 没有使用 datatables, nor Bootstrap. It's using jquery.tablesorter 所以我不知道这是怎么回事。如果您打算使用 tablesorter 而不是带有 Bootstrap 的数据表，则可能需要更新标签。

其次，您的 jsfiddle 演示似乎丢失了 jQuery，并将主题设置为“bootstrap”。您是否阅读了 documentation 关于如何在 tablesorter.js 中使用 bootstrap 主题的内容？

第三，来自tablesorter bootstrap theme demo，其作者在说

Bootstrap v4.x no longer includes fonts or images, so I didn't bother including Font Awesome icons on this demo page.

也许这就是 up/down 箭头没有出现的原因，因为 tablesorter.js 使用图像作为排序图标。

现在为了添加排序图标（可能来自 Font Awesome's），您不能真正更改 header 结构并在其中添加图标。这里的技巧是 .tablesorter-header 的 :before 和 :after 的样式使用内容 \f0de（Font Awesome 向上箭头）和 \f0dd（Font Awesome 向下箭头）：

.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://jsfiddle.net/davidliang2008/hdL0723p/39/

Bootstrap 4-如何使用基于 ASC/DESC 改变颜色的箭头图标对 table 进行排序

Bootstrap 4-How to sort table with arrow icon changing color based on ASC/DESC

tablesorter

datatables

bootstrap-4