I am trying to set the default sort to the second column in my jquery datatable. It by default sorts by index 0. I am using the "aaSorting": [[ 1, "asc" ]]
syntax but it highlights the column which I don't want on initial load. How can I set the default sort of a specific column without it highlighting the column as if no sorting was involved and the 0 index column was being used.

- 45,213
- 22
- 199
- 169

- 22,342
- 54
- 182
- 341
-
do you mean you do not want the highlight for every sorting action? If so, just change the css for the sorted column to the same color as your original column background color – shennyL Dec 27 '11 at 00:07
-
I want the columns to change color on explicit sorting, but on something like paging, I want it to be paging by column 1 without it showing explicity by the column change. The paging sorts by column 0 without changing the column color when you go to page 2. – Mike Flynn Dec 27 '11 at 01:59
9 Answers
There are a couple of options:
Just after initialising DataTables, remove the sorting classes on the TD element in the TBODY.
Disable the sorting classes using http://datatables.net/ref#bSortClasses . Problem with this is that it will disable the sort classes for user sort requests - which might or might not be what you want.
Have your server output the table in your required sort order, and don't apply a default sort on the table (
aaSorting:[]
).

- 310,957
- 84
- 592
- 636

- 5,303
- 5
- 30
- 34
-
-
2No. If you wanted this as a core option it would need to be added to DataTables - this isn't a requirement I've come across yet while developing DataTables, but it is certainly something that I will bare in mind and if it proves to be a popular request and I will most certainly add it in. Until then the three options above apply :-) – Allan Jardine Jan 01 '12 at 18:21
-
4Suggestion #3 above did it for me. It's much easier to disable the sorting and just handle it server side for the initial results. – Unknown Coder Jul 26 '12 at 23:15
-
2@AllanJardine, I'd like to be able to set the default sort column in dataTable() to get an arrow indicator to match my default data set. All my processing is server-side, and when I return my initial results sorted on the non-0th column I want, DataTables doesn't indicate the sort with an arrow until the user interacts with it. – Todd Sprang Aug 15 '13 at 19:46
-
1Option 3 seems like the best choice. Updated syntax is $('#example').dataTable( { "order": [] } ); – toree Jan 27 '15 at 13:25
-
Here is the actual code that does it...
$(document).ready(function()
{
var oTable = $('#myTable').dataTable();
// Sort immediately with column 2 (at position 1 in the array (base 0). More could be sorted with additional array elements
oTable.fnSort( [ [1,'asc'] ] );
// And to sort another column descending (at position 2 in the array (base 0).
oTable.fnSort( [ [2,'desc'] ] );
} );
To not have the column highlighted, modify the CSS like so:
table.dataTable tr.odd td.sorting_1 { background-color: transparent; }
table.dataTable tr.even td.sorting_1 { background-color: transparent; }

- 4,482
- 2
- 30
- 23
-
1This also works as an approach to sort the first column as descending. Thanks! – veeTrain Oct 31 '13 at 18:36
-
2+1 you saved me a lot of pain and suffering!! This was the easiest solution for me. The Datatables documentation is not very explanatory and confusing. Cheers. – TheOptimusPrimus Nov 22 '13 at 19:57
-
@TheOptimusPrimus I agree - it would be nice if they sectioned out simple things like this better :) – theJerm Nov 24 '13 at 03:02
-
How can I sort with multiple column ? I tried var tbl = jQuery('#usersTable').dataTable(); tbl.fnSort( [ [4,'desc'] ] ); tbl.fnSort( [ [3,'asc'] ] ); }); This is always getting column 3. I want to sort 4th column sort desc and 3rd column sort asc. Can you help ? – Sumith Harshan Apr 24 '15 at 14:09
-
1@SumithHarshan oTable.fnSort( [ [1,'asc'], [2, 'desc'], [3, 'asc'] ] ); - I believe if you do it that way it will sort multiples columns. – theJerm Aug 20 '15 at 17:07
Best option is to disable sorting and just feed data with desired sort order (from database or other source). Try to add this to your 'datatable': "bSort": false

- 47
- 3
Datatables supports HTML5 data-* attributes for this functionality.
It supports multiple columns in the sort order (it's 0-based)
<table data-order="[[ 1, 'desc' ], [2, 'asc' ]]">
<thead>
<tr>
<td>First</td>
<td>Another column</td>
<td>A third</td>
</tr>
</thead>
<tbody>
<tr>
<td>z</td>
<td>1</td>
<td>$%^&*</td>
</tr>
<tr>
<td>y</td>
<td>2</td>
<td>*$%^&</td>
</tr>
</tbody>
</table>
Now my jQuery is simply $('table').DataTables();
and I get my second and third columns sorted in desc / asc order.
Here's some other nice attributes for the <table>
that I find myself reusing:
data-page-length="-1"
will set the page length to All (pass 25 for page length 25)...
data-fixed-header="true"
... Make a guess

- 172
- 1
- 10
Just Include the following code:
$(document).ready(function() {
$('#tableID').DataTable( {
"order": [[ 3, "desc" ]]
} );
}
);
Full reference article with the example:
https://datatables.net/examples/basic_init/table_sorting.html

- 2,390
- 2
- 29
- 42
I had this problem too. I had used stateSave
option and that made this problem.
Remove this option and problem is solved.

- 2,665
- 3
- 24
- 46
This worked for me:
jQuery('#tblPaging').dataTable({
"sort": true,
"pageLength": 20
});

- 1,758
- 1
- 19
- 24