jQuery dataTable不显示排序图标

时间:2011-11-27 15:09:18

标签: jquery datatables

我正在尝试使用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>

12 个答案:

答案 0 :(得分:37)

我遇到了这个问题,我发现因为我已经将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; }

答案 1 :(得分:13)

我遇到了这个问题,我花了一个小时才发现我没有链接到所需的样式表。就我而言,我有:

<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的解决方案,但如果您遇到此问题,可能会确保您已连接正确的样式表。

答案 2 :(得分:5)

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

我假设数据广告插件正在初始化,你会看到你期望的其他一切吗?

您可能需要查看此http://debug.datatables.net/这是一个有助于调试此插件的书签。

答案 3 :(得分:3)

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

"bSort": true,

答案 4 :(得分:1)

我通过将表头文本包装在<div>

中来解决问题
<th><div>Date</div></th>

答案 5 :(得分:1)

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

答案 6 :(得分:1)

如果使用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

答案 7 :(得分:0)

我只是升级了JQuery数据表,现在运行正常

答案 8 :(得分:0)

如果您使用的是BundleConfig,请添加以下参考:

“〜/ Content / DataTables / css / dataTables.bootstrap4.css”,

答案 9 :(得分:0)

我也遇到同样的问题。 在阅读了杰里米(Jeremy)的遮阳篷后,我得到了一个缺少的样式表的链接,该链接是:

<link href="~/lib/datatables/media/css/dataTables.uikit.css" rel="stylesheet" />

答案 10 :(得分:0)

我在 Khaled 的回答的帮助下通过添加以下 css 和 js 参考解决了这个问题。

String

答案 11 :(得分:-2)

很简单,

从您的目录中调用 Datatables JS 文件和 CSS 文件。不是来自 CDN。现在打开数据表的基本示例并检查图标。在另一个浏览器选项卡中打开它。下载图像并将其保存到您的数据表目录。注意:请参阅保存它的检查链接。你必须像这样保存这些图像。就是这样。