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.
-
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– shennyLCommented Dec 27, 2011 at 0: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 FlynnCommented Dec 27, 2011 at 1: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:[]
).
-
So it seems there isn't a seamless solution built into their API. Commented Dec 28, 2011 at 16:46
-
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 :-) Commented Jan 1, 2012 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. Commented Jul 26, 2012 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. Commented Aug 15, 2013 at 19:46
-
1Option 3 seems like the best choice. Updated syntax is $('#example').dataTable( { "order": [] } );– toreeCommented Jan 27, 2015 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; }
-
1This also works as an approach to sort the first column as descending. Thanks!– veeTrainCommented Oct 31, 2013 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. Commented Nov 22, 2013 at 19:57
-
@TheOptimusPrimus I agree - it would be nice if they sectioned out simple things like this better :)– theJermCommented Nov 24, 2013 at 3: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 ? Commented Apr 24, 2015 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.– theJermCommented Aug 20, 2015 at 17:07
You can use the fnSort function, see the details here:
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
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
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
I had this problem too. I had used stateSave
option and that made this problem.
Remove this option and problem is solved.
This worked for me:
jQuery('#tblPaging').dataTable({
"sort": true,
"pageLength": 20
});