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

Question

我已经为我的 html 表格安装了 DataTables 插件，但是，虽然单击顶行会使表格按单击的列排序，但排序箭头没有显示。

这就是我引用 DataTable Assets 的方式(通过 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

以下是该表在检查时在运行时的样子:

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