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>

Rubicund

Answer 1

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

Unknot

Perfect! work for me. – Incomplete

Answer 2

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>

Junkojunkyard

Answer 3

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');
    });

Facial

It works fine if you follow the answer by @davidkonrad, see this example – Rickettsia

@Rickettsia 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. – Facial

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. – Facial

It works because you've disabled ordering entirely with ordering option. But it also works even with with just order: [[ 1, "asc" ]] as @Unknot said, see jsfiddle.net/6k26o7mk/35 Can you provide a fiddle where it doesn't work as you say? – Rickettsia