即使被禁用,数据表排序 asc 图标仍然出现在第一列

Datatable sorting asc icon still appear on first column even being disabled

您好,我有以下 table 设计。我不希望第一列和最后一列是 sortable。我已经设置 accordingly.But 图标 asc 仍然出现在第一列但不出现在最后一列。但是当我尝试对第二列进行排序时,它会消失。

<table id="userTable" name='userTable' class="table table-striped table-bordered bootstrap-datatable " data-column-defs='[{"sortable": false, "targets": [0,3]}]' style='table-layout: fixed;'>
  <thead>
    <tr>
      <th class="no-sort" style='width: 10%;'>No.</th>
      <th style='width: 25%;'>First Name</th>
      <th style='width: 20%;'>last Name</th>
      <th style='width: 25%;'>Details</th>
    </tr>
  </thead>
</table>

即使您禁用列排序,数据表排序 order 仍然存在。默认情况下 order[0, 'asc'];只需将 order 设置为定位 #2 列即可:

var table = $('#example').DataTable({
    //....
    order: [[ 1, "asc" ]] //column indexes is zero based
})  

演示 -> http://jsfiddle.net/6k26o7mk/

或者如果您根本不需要任何默认顺序,则使用 order: [](图标将隐藏,直到用户对 table 进行排序)。

我无法使用数据表下载生成器

在数据表版本:1.10.11上使用此功能

在这种情况下,我使用 jQuery 作为解决方法来删除排序 class,这反过来会删除图标。

$(document).ready(function () {
    $('#my-dataTables').DataTable({
        paging: false,
        ordering: false,
        info:     false,
    });

    // Removes icon 
    $('.sorting_asc').removeClass('sorting_asc');
    });

在版本 1.10.20 中,它对我来说就像这样:

$(document).ready(function(){
  $('#example').DataTable({
    ordering: false, //disable ordering
    initComplete: function( settings, json ) {
      $("th").removeClass('sorting_desc'); //remove sorting_desc class
    }
  });
});
<link href="//cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>

<table id="example" class="display">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1 Data 1</td>
      <td>Row 1 Data 2</td>
    </tr>
    <tr>
      <td>Row 2 Data 1</td>
      <td>Row 2 Data 2</td>
    </tr>
  </tbody>
</table>