我如何获得要显示的DataTables插件的排序箭头？

Question

我有DataTables插件可用于我的html表，但是，尽管单击第一行会导致该表按clicked-in列进行排序，但不会显示排序箭头。

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

<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

[使用Bootstrap 4时，DataTables插件可能不会显示排序箭头，因为DataTables假定已包含Glyphicons图标，但是Bootstrap 4停止捆绑Glyphicons。

在DataTables 1.10.21中，dataTables.bootstrap4.css包含：

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 5捆绑其自己的图标，并在将来的DataTables版本中使用这些图标代替Glyphicons。

直到我使用此过程：

Downloaded DataTables。已将images / sort * .png复制到我的网站{public folder} / images /将此添加到我自己的application.css文件中，以覆盖部分dataTables.bootstrap4.css：

// Override some datatables settings to handle Bootstrap 4 no longer bundling Glyphicons.
// This is needed to show table header sort order icons.
table.dataTable thead .sorting:after {
  content: url('/images/sort_both.png');
  /* sort */
}
table.dataTable thead .sorting_asc:after {
  content: url('/images/sort_asc.png');
  /* sort-by-attributes */
}
table.dataTable thead .sorting_desc:after {
  content: url('/images/sort_desc.png');
  /* sort-by-attributes-alt */
}