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

Question

Hi I have the following table design. I dont want the first and last column to be sortable. I have set accordingly.But the icon asc still appears on the first column but not on the last column. But when I try to sort the second column it goes off.

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

davidkonrad · Accepted Answer · 2016-02-20T13:46:52.017

17

Even if you disable sorting for a column, the dataTables sort order still remain. By default order is [0, 'asc']; simply set order to target the #2 column instead :

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

demo -> http://jsfiddle.net/6k26o7mk/

Or use order: [] if you not want any default order at all (icons will be hidden until the user sort the table).

edited Feb 20 '16 at 13:46

answered Feb 20 '16 at 13:00

davidkonrad

83,997
17
205
265

Perfect! work for me. – LogGurkha Mar 25 '22 at 05:48

score 1 · Answer 2 · answered Mar 28 '20 at 12:42

In version 1.10.20 it worked for me just like this:

$(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>

usr4896260 · Answer 3 · 2016-11-17T13:36:13.420

0

I was not able to get this working on datatables version: 1.10.11 with the DataTables download builder

Being that case, I used jQuery as a workaround to remove the sorting class, which in turn will remove the icon.

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

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

edited Nov 17 '16 at 13:36

answered Nov 16 '16 at 20:56

usr4896260

1,427
3
27
50

It works fine if you follow the [answer by @davidkonrad](http://stackoverflow.com/a/35523595/3549014), see [this example](http://jsfiddle.net/6k26o7mk/18/) – Gyrocode.com Nov 16 '16 at 21:19
@Gyrocode.com Why the down vote? I clearly stated **version 1.10.11** In the example you provided, it uses **1.10.9**, which doesn't work. – usr4896260 Nov 17 '16 at 12:39
In the provided fiddle, you can remove `order: [[ 1, "asc" ]] ` and it will still remove the icon, therefore the solution is not entirely accurate...Maybe its because I used the DataTables download builder? (_I've updated my answer to mention that_) Either way, I stand by my original post as the suggested answer did not work. – usr4896260 Nov 17 '16 at 13:27
1

It works because you've disabled ordering entirely with `ordering` option. But it also works even with with just `order: [[ 1, "asc" ]]` as @davidkonrad said, see http://jsfiddle.net/6k26o7mk/35/ Can you provide a fiddle where *it doesn't work* as you say? – Gyrocode.com Nov 17 '16 at 15:50

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

3 Answers3