jQuery dataTable 不显示排序图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8286508/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery dataTable doesn't show sort icon
提问by PsCraft
I am trying to use a jQuery dataTable plugin. The problem is that the sort icon (this arrow which point in which direction data is actual sorted) is not displayed.
我正在尝试使用 jQuery dataTable 插件。问题是排序图标（这个箭头指向数据实际排序的方向）没有显示。
My code looks as follows:
我的代码如下所示：
$('#example').dataTable({
"bPaginate": false,
"bFilter": false,
"oLanguage": {
"sInfo": ""
}
});
and HTML:
和 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>
</table>
回答by John
I had this problem, I found because I had copied the CDN script to my local machine it wasn't referencing the images correctly anymore as @Matt2012 pointed out. So my solution was to updated the CSS file to look for those images where I want to put them, after I saved them also.
我遇到了这个问题，我发现因为我已将 CDN 脚本复制到我的本地机器上，所以它不再像@Matt2012 指出的那样正确引用图像。所以我的解决方案是更新 CSS 文件以在我保存它们之后查找我想要放置它们的图像。
See this part:
看这部分：
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; }
回答by Jeremy Goodell
I had this problem and it took me an hour to discover that I was not linking to a required stylesheet. In my case, I had:
我遇到了这个问题，我花了一个小时才发现我没有链接到所需的样式表。就我而言，我有：
<link rel="stylesheet" type="text/css" href="@{'/public/stylesheets/minidatatables-bootstrap.css'}"/>
but I also needed to add:
但我还需要补充：
<link rel="stylesheet" type="text/css" href="@{'/public/stylesheets/datatables-bootstrap.css'}"/>
for the sort icons to show up. This is likely a bootstrap-only solution, but if you're having this problem, you might make sure you've got the right stylesheets linked.
用于显示排序图标。这可能是仅引导程序的解决方案，但如果您遇到此问题，您可能需要确保链接了正确的样式表。
回答by Matt2012
Datatables uses a sprite for the icons you want to use firebug in firefox click on net than all and look for anything showing up in red. Which would indicate that an asset is not being loaded. You are looking form something like this "/media/css/jui_themes/smoothness/images/ui-icons_888888_256x240.png".
Datatables 使用一个精灵来表示你想在 firefox 中使用 firebug 的图标，点击 net 上的所有图标，然后查找显示为红色的任何内容。这表明资产没有被加载。您正在寻找类似于“/media/css/jui_themes/smoothness/images/ui-icons_888888_256x240.png”的形式。
I am assuming that the datatable plugin is being initialised and you are seeing everything else you would expect?
我假设正在初始化数据表插件并且您看到了您期望的其他所有内容？
You may want to look at this http://debug.datatables.net/which is a bookmarklet that helps debugging this plugin.
你可能想看看这个http://debug.datatables.net/这是一个帮助调试这个插件的书签。
回答by xjx424
Everytime I have had that problem with dataTables it stems from a javascript error.
Also, you could try adding
每次我遇到 dataTables 的问题时，它都源于 javascript 错误。
另外，您可以尝试添加
"bSort": true,
回答by Camilo Calderón Tapia
If you use Bootstrap V4, you should include 2 additional css:
如果你使用 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">
for more information visit this link
欲了解更多信息，请访问此 链接
回答by Primoshenko
If you are using BundleConfig, please add the following reference:
如果您使用的是 BundleConfig，请添加以下参考：
"~/Content/DataTables/css/dataTables.bootstrap4.css",
"~/Content/DataTables/css/dataTables.bootstrap4.css",
回答by Onshop
I fixed the problem by wrapping the table header text in a <div>:
我通过将表标题文本包装在一个中来解决这个问题<div>：
<th><div>Date</div></th>
回答by Khaled
I had the problem too. Just use their own configurator to setup all the options you want form here https://datatables.net/download/they will generate exactly the .jsand .cssfiles you need.
You then can either download or use their own hosted CDN for both files
我也有这个问题。只需使用自己的配置设置所有你想在这里形式的选项https://datatables.net/download/就会产生完全.js和.css你需要的文件。然后，您可以为这两个文件下载或使用他们自己的托管 CDN
回答by Arun Prasad E S
I just UPGRADED JQuery datatable, now works fine
我刚刚升级了 JQuery 数据表，现在工作正常
回答by Vinicius Bassi
I was with the same issue. After reading Jeremy's awnser I got a link to a missing stylesheet, wich was:
我遇到了同样的问题。在阅读了 Jeremy 的 awnser 后，我得到了一个缺少样式表的链接，它是：
<link href="~/lib/datatables/media/css/dataTables.uikit.css" rel="stylesheet" />
