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

时间:2016-09-27 18:19:16

标签: jquery image sorting datatables cdn

我已经将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

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

enter image description here

1 个答案:

答案 0 :(得分: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