jquery datatables default sort

Question

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 — shennyL
– shennyL, Commented 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 Flynn
– Mike Flynn, Commented Dec 27, 2011 at 1:59

ThiefMaster · Accepted Answer · 2013-03-18 14:01:19Z

56

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:[]).

edited Mar 18, 2013 at 14:01

ThiefMaster

320k85 gold badges608 silver badges648 bronze badges

answered Dec 27, 2011 at 9:40

Allan Jardine

5,5315 gold badges33 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Mike Flynn Over a year ago

So it seems there isn't a seamless solution built into their API.

Allan Jardine Over a year ago

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

Unknown Coder Over a year ago

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.

Todd Sprang Over a year ago

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

toree Over a year ago

Option 3 seems like the best choice. Updated syntax is $('#example').dataTable( { "order": [] } );

theJerm · Accepted Answer · 2013-10-31 21:06:35Z

49

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

edited Oct 31, 2013 at 21:06

answered Jan 14, 2013 at 23:30

theJerm

4,6022 gold badges32 silver badges23 bronze badges

5 Comments

veeTrain Over a year ago

This also works as an approach to sort the first column as descending. Thanks!

TheOptimusPrimus Over a year ago

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

theJerm Over a year ago

@TheOptimusPrimus I agree - it would be nice if they sectioned out simple things like this better :)

Sumith Harshan Over a year ago

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 ?

theJerm Over a year ago

@SumithHarshan oTable.fnSort( [ [1,'asc'], [2, 'desc'], [3, 'asc'] ] ); - I believe if you do it that way it will sort multiples columns.

Zeev Novikov · Accepted Answer · 2012-07-03 09:09:37Z

15

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

http://datatables.net/api#fnSort

answered Jul 3, 2012 at 9:09

Zeev Novikov

1511 silver badge2 bronze badges

Comments

ealex_ru · Accepted Answer · 2014-01-29 11:46:07Z

4

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

edited Jan 29, 2014 at 11:46

answered Jan 29, 2014 at 11:08

ealex_ru

573 bronze badges

Comments

th3byrdm4n · Accepted Answer · 2016-10-10 17:15:58Z

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

Akshay Pethani · Accepted Answer · 2017-08-14 12:33:50Z

1

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

answered Aug 14, 2017 at 12:33

Akshay Pethani

2,6402 gold badges32 silver badges44 bronze badges

Comments

Majid Basirati · Accepted Answer · 2016-11-01 06:01:51Z

0

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

answered Nov 1, 2016 at 6:01

Majid Basirati

2,9053 gold badges27 silver badges47 bronze badges

Comments

Bassem Shahin · Accepted Answer · 2016-12-14 09:02:26Z

0

use this it works for me: "order": [[ 1, "ASC" ]],

answered Dec 14, 2016 at 9:02

Bassem Shahin

7067 silver badges14 bronze badges

Comments

Colin · Accepted Answer · 2017-01-03 14:26:14Z

0

This worked for me:

       jQuery('#tblPaging').dataTable({
            "sort": true,
            "pageLength": 20
        });

answered Jan 3, 2017 at 14:26

Colin

1,8561 gold badge21 silver badges25 bronze badges

Collectives™ on Stack Overflow

jquery datatables default sort

9 Answers 9

5 Comments

5 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

5 Comments

5 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related