如何获得为 DataTables 插件显示的排序箭头？答案

【问题标题】：How can I get the sorting arrows to display for the DataTables plugin?如何获得为 DataTables 插件显示的排序箭头？
【发布时间】：2016-09-27 18:19:15
【问题描述】：

我已经为我的 html 表格工作了 DataTables 插件，但是，尽管单击顶行会导致表格按单击的列排序，但没有显示排序箭头。

这就是我引用 DataTable 资产的方式（通过 CDN）：

<link href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>

然后我像这样戳插件：

$('#delperfTable').DataTable({
    "paging": false,
    "info": false,
    "searching": false
});

排序工作正常，但不显示方便的视觉指示器。我怎样才能让这些排序箭头按原样显示，我认为应该是默认行为？

我已经阅读了一些关于需要“拉图像”的谷歌搜索信息，但如果可能的话，我想通过 CDN 引用这些图像。

更新

注意：我也有：

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

HTML 是：

<div class="col-md-6">
    <div class="bottomright">
        <h2 class="sectiontext">Delivery Performance</h2>
        <table id="delperfTable">
            <thead>
                <tr>
                    <th>PRO*ACT Distributor</th>
                    <th>Restaurant Location</th>
                    <th class="rightjustifytext">Avg Order Amount</th>
                    <th class="rightjustifytext">Avg Package Count</th>
                    <th class="rightjustifytext">Total Sales</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Sunrise FL</td>
                    <td>A1A ALEWORKS - #4405 - ST. AUGUSTINE</td>
                    <td class="rightjustifytext">$475.78</td>
                    <td class="rightjustifytext">28.50</td>
                    <td class="rightjustifytext">$1,903.10</td>
                </tr>
                . . . // other trs elided for brevity
                <tr class="bold">
                    <td>TOTAL</td>
                    <td></td>
                    <td class="rightjustifytext">375.11</td>
                    <td class="rightjustifytext">23.50</td>
                    <td class="rightjustifytext">$7,966.68</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

更新 2

我添加了几个类，一个到表，一个到一个列，如下：

<table id="delperfTable" class="dataTable">
    <thead>
        <tr>
            <th class="sorting">PRO*ACT Distributor</th>

...但没有区别。

更新 3

这是检查时表在运行时的样子：

【问题讨论】：

是否包含引导 css？表类与演示匹配吗？只要包含设置和所有依赖项，就没有理由不能全部从 cdn 工作
箭头由dataTables.bootstrap.min.css添加
并取决于具有dataTable 类的表、一个thead 和具有.sorting 类的单元格。您的情况缺少什么？
不，我相信这是 DataTables 添加的内容。检查您的表，看看它是否被添加。 并停止向您的问题添加“UPDATE”标题。更新现有问题，而不是留下陈旧的代码示例。
datatables.net/examples/basic_init/table_sorting.html 会帮助你。请注意，您应该在引导 css 文件之后添加 dataTables.bootstrap.min.css 文件。 $('#example').DataTable( { "order": [[ 3, "desc" ]] //Case sensitive } );

标签： jquery image sorting datatables cdn

【解决方案1】：

您的代码在这一行缺少rel="stylesheet"：

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />

这会导致浏览器无提示地包含 dataTables.bootstrap.min.css 这就是表格排序向上/向下箭头的显示位置。

在 DataTables 1.10.21 中，dataTables.bootstrap.css（用于 Bootstrap 3）包含：

table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:after {
  position: absolute;
  bottom: 8px;
  right: 8px;
  display: block;
  font-family: 'Glyphicons Halflings';
  opacity: 0.5;
}
table.dataTable thead .sorting:after {
  opacity: 0.2;
  content: "\e150";
  /* sort */
}
table.dataTable thead .sorting_asc:after {
  content: "\e155";
  /* sort-by-attributes */
}
table.dataTable thead .sorting_desc:after {
  content: "\e156";
  /* sort-by-attributes-alt */
}

如果您使用的是 Bootstrap 4，则要使用的文件是 dataTables.bootstrap4.css

【讨论】：