jQuery dataTable 不显示排序图标

Posted 2023-05-07

【中文标题】jQuery dataTable 不显示排序图标

【英文标题】：jQuery dataTable doesn't show sort icon

【发布时间】：2012-01-07 08:39:59

【问题描述】：

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

我的代码如下：

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

和 html：

<table class="surfClass" cellspacing="1" id="example">
    <thead>
        <tr>
            <th >Name</th>
            <th >The hourly rate (points)</th>
            <th>Levels of referrals</th>
            <th>bonuses</th>
            <th >Payout minimum</th>
        </tr>
    </thead>
</table>

【参考方案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; 

【讨论】：

这就是为我解决问题的方法。您可以从这里datatables.net/download/index 下载图像。我将它们移到了我的 /images 文件夹中，无需进行任何更改。

非常使用完整答案

【参考方案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'"/>

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

【讨论】：

我还缺少对 css 文件的引用，但它被埋在 ~/Scripts/js/plugins/tables/datatables/jquery.dataTables.css 以防万一有人也错过了。

CDN 副本可在cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css获得

【参考方案3】：

Datatables 使用 sprite 来表示您想在 firefox 中使用 firebug 的图标，点击网络上的所有内容，然后查找以红色显示的任何内容。这表明资产没有被加载。您正在寻找类似“/media/css/jui_themes/smoothness/images/ui-icons_888888_256x240.png”的形式。

我假设数据表插件正在初始化，而您正在看到您所期望的所有其他内容？

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

【讨论】：

谢谢。 Firefox 调试器显示 404 问题。我的路径设置错误。

【参考方案4】：

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

"bSort": true,

【参考方案5】：

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

"~/Content/DataTables/css/dataTables.bootstrap4.css",

【参考方案6】：

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

我通过将表格标题文本包装在<div> 中解决了这个问题：

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

【参考方案8】：

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

【参考方案9】：

我只是升级了 JQuery 数据表，现在可以正常工作了

【参考方案10】：

我遇到了同样的问题。 阅读杰里米的回答后，我得到了一个缺少样式表的链接，它是：

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

【参考方案11】：

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

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.24/datatables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.24/datatables.min.js"></script>

【参考方案12】：

从 CDN 调用 Datatables JS 文件和 CSS 文件。不是本地人。 现在使用 Datatables 打开文件并检查图标。 在另一个浏览器选项卡中打开图标。 下载图像并将其保存到您的数据表目录。

注意：查看保存它的检查链接。您必须将这些图像保存在确切的相对路径中。

【讨论】：

这对我有用