jQuery dataTable没有显示排序图标。

Question

jQuery dataTable没有显示排序图标。

32

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

我的代码如下：

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/dataTables.bootstrap.min.css" integrity="sha512-BMbq2It2D3J17/C7aRklzOODG1IQ3+MHw3ifzBHMBwGO/0yUqYmsStgBjI0z5EYlaDEFnvYV7gNYdD3vFLRKsA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js" integrity="sha512-BkpSL20WETFylMrcirBahHfSnY++H2O1W+UnEEO4yNIl+jI2+zowyoGJpbtk6bx97fBXf++WJHSSK2MV4ghPcg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<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>

- PsCraft

我制作了你的代码片段（但它没有任何实际的表格数据），而你从未接受过任何答案。 - Mark Schultheiss

13个回答

14

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

<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的解决方案，但如果您遇到此问题，可能需要确保链接了正确的样式表。

- Jeremy Goodell

1

我也遗漏了一个CSS文件的引用，但它被埋在~/Scripts/js/plugins/tables/datatables/jquery.dataTables.css中，以防有人也错过了这个。 - Robb Sadler

CDN副本可在https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css获得。 - Abhijeet Nagre

5

Datatables使用精灵图标，如果您想在Firefox中使用firebug，请单击“net”，然后单击“all”并查找任何以红色显示的内容。这将表明某个资源未被加载。您要寻找类似于此 "/media/css/jui_themes/smoothness/images/ui-icons_888888_256x240.png" 的东西。

我假设Datatable插件已被初始化，并且您看到了您所期望的所有其他内容？

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

- Matt2012

1

谢谢。Firefox调试器显示404错误。我的路径设置有误。 - Jérôme

3

如果您正在使用BundleConfig，请添加以下引用：~/Content/DataTables/css/dataTables.bootstrap4.css。

- Primoshenko

3

每次我遇到dataTables的问题都是由于javascript错误引起的。此外，您可以尝试添加以下内容。

"bSort": true,

- xjx424

2

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

- Camilo Calderón Tapia

1

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

- Khaled

1

我通过将表头文本包裹在一个<div>中来解决了这个问题：

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

- Onshop

1

在 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>

- Shruth L

0

我刚刚升级了JQuery datatable，现在运行得很好

- Arun Prasad E S

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- John · Accepted Answer

我曾经遇到过这个问题，后来发现是因为我把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; }