jQuery dataTable不显示排序图标
我正在尝试使用jQuery dataTable插件。问题是没有显示排序图标(这个指向哪个方向数据实际排序的箭头)。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>
的DataTable使用您要使用在Firefox萤火点击净多一切,寻找任何的图标精灵以红色显示。这将表明资产未被加载。你看起来像这样“/media/css/jui_themes/smoothness/images/ui-icons_888888_256x240.png”。
我假设数据表插件正在被初始化,你看到了你所期望的一切吗?
你可能想看看这个http://debug.datatables.net/这是一个书签,可以帮助调试这个插件。
每当我有dataTables这个问题,它源于一个JavaScript错误。
此外,您可以尝试添加
"bSort": true,
我有这个问题,我花了一个小时才发现,我没有链接到需要的样式表。就我而言,我有:
<link rel="stylesheet" type="text/css" href="@{'/public/stylesheets/minidatatables-bootstrap.css'}"/>
,但我还需要补充:
<link rel="stylesheet" type="text/css" href="@{'/public/stylesheets/datatables-bootstrap.css'}"/>
的分类图标来显示。这可能仅仅是一个引导式解决方案,但是如果你遇到了这个问题,你可能会确保你已经链接了正确的样式表。
我也错过了一个css文件的引用,但它被埋在〜/ Scripts/js/plugins/tables/datatables/jquery.dataTables.css中,以防万一有人错过了那一个。 –
嘿。捂脸。谢谢。 – Bangkokian
CDN副本位于https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css –
我有这个问题,我发现因为我已经复制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; }
这是为我解决了问题。你可以从这里下载图像https://datatables.net/download/index。我把它们移到了我的/ images文件夹中,我不需要改变任何东西。 –
我通过在<div>
包装表头文本解决了这一问题:
<th><div>Date</div></th>
我有问题了。只需使用他们自己的配置器在这里设置你想要的所有选项https://datatables.net/download/他们将生成你需要的.js
和.css
文件。 然后你可以下载或使用自己的托管CDN文件
谢谢。 Firefox调试器显示404个问题。我有一个路径设置错误。 –