jQuery dataTable 不显示排序图标

Question

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

Answer 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; }