Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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>
like image 621
user5313398 Avatar asked Feb 20 '16 10:02

user5313398


People also ask

How do I turn off sorting in columns?

By setting allowSorting property as false in the column settings, we can prevent the sorting action on that particular column.

How do you make a sorting false in Datatable?

Use columnDefs option to remove sorting from a column. Pass column index in targets within [] (Indexing starting from 0) and set orderable to false .

How do I sort a specific column in a Datatable?

Using the order initialisation parameter, you can set the table to display the data in exactly the order that you want. The order parameter is an array of arrays where the first value of the inner array is the column to order on, and the second is 'asc' (ascending ordering) or 'desc' (descending ordering) as required.

What is Aocolumns in jquery Datatable?

aoColumnDefs: This array allows you to target a specific column, multiple columns, or all columns, using the aTargets property of each object in the array (please note that aoColumnDefs was introduced in DataTables 1.7).


1 Answers

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

like image 105
davidkonrad Avatar answered Sep 18 '22 13:09

davidkonrad