jQuery dataTable不显示排序图标

Question

我正在尝试使用jQuery dataTable插件。问题是不显示排序图标（此箭头指向哪个方向数据实际排序）。

我的代码如下：

$('#example').dataTable(
{
    "bPaginate": false,
    "bFilter": false,
    "oLanguage": { "sInfo": ""}        
}
);

和Html：

<table class="surfClass" cellspacing="1" id="example">

<thead>
<tr>
    <th width="120px">Name</th>
    <th width="120px">The hourly rate (points)</th>
    <th>Levels of referrals</th>
    <th>bonuses</th>
    <th width="70px">Payout minimum</th>
</tr>
</thead>

Answer 1

我遇到了这个问题，我发现因为我已经将CDN脚本复制到我的本地机器上了，因为@ Matt2012指出它不再正确引用图像。所以我的解决方案是更新CSS文件，以便在我保存它们之后查找我想要放置它们的图像。

看这部分：

table.dataTable thead .sorting { background: url('/Content/images/sort_both.png') no-repeat center right; }
table.dataTable thead .sorting_asc { background: url('/Content/images/sort_asc.png') no-repeat center right; }
table.dataTable thead .sorting_desc { background: url('/Content/images/sort_desc.png') no-repeat center right; }

table.dataTable thead .sorting_asc_disabled { background: url('/Content/images/sort_asc_disabled.png') no-repeat center right; }
table.dataTable thead .sorting_desc_disabled { background: url('/Content/images/sort_desc_disabled.png') no-repeat center right; }

Answer 2

我有这个问题，我花了一个小时才发现我没有链接到所需的样式表。在我的情况下，我有：

<link rel="stylesheet" type="text/css" href="@{'/public/stylesheets/minidatatables-bootstrap.css'}"/>

但我还需要补充：

<link rel="stylesheet" type="text/css" href="@{'/public/stylesheets/datatables-bootstrap.css'}"/>

用于显示排序图标。这可能是一个仅限bootstrap的解决方案，但如果您遇到此问题，可能需要确保已连接正确的样式表。

Answer 3

Datatables使用精灵为你想要在firefox中使用firebug的图标点击net而不是全部并查找显示为红色的任何内容。这表明资产没有被加载。你正在寻找像这样的形式“/media/css/jui_themes/smoothness/images/ui-icons_888888_256x240.png”。

我假设datatable插件正在初始化，你正在看到你期望的其他一切？

你可能想看看这个http://debug.datatables.net/这是一个帮助调试这个插件的书签。

Answer 4

每次我遇到dataTables的问题都源于javascript错误。 此外，你可以尝试添加

"bSort": true,

Answer 5

我通过将表头文本包装在<div>中来解决问题：

<th><div>Date</div></th>

Answer 6

我也遇到了这个问题。只需使用他们自己的配置器来设置您想要的所有选项，这里https://datatables.net/download/他们将生成您需要的.js和.css文件。然后，您可以为这两个文件下载或使用自己的托管CDN

Answer 7

如果您使用Bootstrap V4，则应包含2个额外的css：

<link href="/bower_components/font-awesome/css/font-awesome.css"  rel="stylesheet">
<link href="/bower_components/datatables.net-plugins/integration/font-awesome/dataTables.fontAwesome.css"  rel="stylesheet">

欲了解更多信息，请访问这个link

Answer 8

如果您使用的是BundleConfig，请添加以下参考：

“〜/内容/数据表/ CSS / dataTables.bootstrap4.css”

Answer 9

我只是UPGRADED JQuery数据表，现在工作正常