如何让DataTables插件显示排序箭头？

Question

我已经成功为我的HTML表格使用了DataTables插件，但是，虽然点击顶部行会导致表格按所点击的列进行排序，但排序箭头却没有显示。

这是我通过CDN引用DataTables资产的方式：

<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

下面是在运行时检查表格的样子：

- B. Clay Shannon-B. Crow Raven

---

Bootstrap CSS包含在内吗？表格类匹配演示吗？只要设置和所有依赖项都包含在内，从CDN全部加载应该没有问题。 - undefined

箭头是由 dataTables.bootstrap.min.css 添加的。 - undefined

并且依赖于表格具有dataTableз±»гЂЃдёЂдёЄtheadе’Ње…·жњ‰.sorting类的单元格。在您的情况下缺少什么？ - undefined

不，我相信那是DataTables添加的功能。检查一下你的表格，看看是否已经添加了它。还有，请不要再在你的问题中添加"UPDATE"标题了。请更新现有的问题，而不是留下过时的代码示例。 - undefined

这个链接是一个关于数据表格排序的示例页面，你可以参考它。请注意，在引入 Bootstrap CSS 文件之后，你需要添加 dataTables.bootstrap.min.css 文件。代码 $('#example').DataTable( { "order": [[ 3, "desc" ]] //大小写敏感 } ); 是用来初始化数据表格并设置排序规则的。 - undefined

Answer 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

- Brent Pfister