数据表排序 asc 图标仍然出现在第一列上，即使被禁用 - Datatable sorting asc icon still appear on first column even being disabled

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

本文关键字：一列图标 asc 排序数据表 | 更新日期: 2023-09-27

嗨，我有以下表格设计。我不希望第一列和最后一列是可排序的。我已经相应地设置了。但是图标 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: []（图标将被隐藏，直到用户对表格进行排序）。

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

我无法使用数据表下载构建器在数据表版本：1.10.11 上工作

在这种情况下，我使用 jQuery 作为删除排序类的解决方法，这反过来将删除图标。

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