current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.4 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 52 down vote favorite
11

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.

share|improve this question
    
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 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 Flynn Dec 27 '11 at 1:59
up vote 52 down vote accepted

There are a couple of options:

  1. Just after initialising DataTables, remove the sorting classes on the TD element in the TBODY.

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

  3. Have your server output the table in your required sort order, and don't apply a default sort on the table (aaSorting:[]).

share|improve this answer
2  
No. 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 1 '12 at 18:21
4  
Suggestion #3 above did it for me. It's much easier to disable the sorting and just handle it server side for the initial results. – DMS Jul 26 '12 at 23:15
3  
assorting:[] works fine. – Dinesh Dec 11 '12 at 16:40
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
1  
Option 3 seems like the best choice. Updated syntax is $('#example').dataTable( { "order": [] } ); – toree Jan 27 '15 at 13:25
up vote 45 down vote

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; }
share|improve this answer
1  
This 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 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 ? – 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
up vote 15 down vote

You can use the fnSort function, see the details here:

http://datatables.net/api#fnSort

share|improve this answer
up vote 2 down vote

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

share|improve this answer
up vote 0 down vote

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

share|improve this answer
up vote 0 down vote

I had this problem too. I had used stateSave option and that made this problem.
Remove this option and problem is solved.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.