Question

我已经将DataTables插件用于我的html表，但是，虽然单击顶行会导致表按单击列排序，但排序箭头不会显示。

这就是我引用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

以下是表在检查时查看运行时的方式：

Answer 1

您的代码在此行上缺少sudo apt-get install gcc：

rel="stylesheet"

这导致浏览器无提示地不包含dataTables.bootstrap.min.css。这是显示表排序上/下箭头的地方。

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

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

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

如何获取DataTables插件的排序箭头？

更新

更新2

更新3

1 个答案: