jquery-datatables multi-column sort direction

Question

Using jquery-datatables.

Example: http://jsfiddle.net/b2fLye17/17/

$('#example').DataTable({

    filter:false,
    columnDefs: [
                    {
                        targets: [1],//when sorting age column
                        orderData: [1,2] //sort by age then by salary
                    } 
                ]
});

When you click the age column, The table sort by age ascending then by salary ascending.

What would be my options to make it sort by age ascending then by salary descending ?

Thanks !

-------------------------- Edit 1 ---------------------

Clarification : When the age column is sorted ascending it should sort by age ascending then by salary descending. When the age column is sorted descending it should sort by age descending then by salary ascending

-------------------------- Edit 2 ---------------------

A picture of the desired result enter image description here

fly_ua · Accepted Answer · 2014-12-17 14:17:58Z

4

Use

$(document).ready(function() {

    $('#example').DataTable({

        filter:false,
        columnDefs: [
                        {
                            orderData: [[1, 'asc'], [2, 'desc']]//sort by age then by salary
                        }
                    ]
    });
});

JS Fiddle http://jsfiddle.net/b2fLye17/13/

edited Dec 17, 2014 at 14:17

answered Dec 17, 2014 at 14:04

fly_ua

1,0548 silver badges12 bronze badges

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

5 Comments

sebmoi Over a year ago

It's not working as you can see in this example. jsfiddle.net/b2fLye17/9 Thanks for your time!

sebmoi Over a year ago

Removing targets wont sort salary. In the example, it looked like it was working because the salary of the people at age 40 was already sorted in the html. I switched 86$ and 170$ to test it. Example : jsfiddle.net/b2fLye17/14

fly_ua Over a year ago

Please check this out - jsfiddle.net/b2fLye17/18. So much options to set sorting )

sebmoi Over a year ago

aaSorting does the trick before i sort a column. But what i need to do is -> When the age column is sorted ascending (with a click on it) it should sort by age ascending then by salary descending. When the age column is sorted descending it should sort by age descending then by salary ascending. Also thanks again for your time! I'll add an example shortly

fly_ua Over a year ago

This is interesting, and i do not know how to configure this using DataTable options, but i have the idea for workaround. AFAIK table is sorted by first element content, even if it is hidden. So you can bind some event to sorting and create hidden input in your salary column. This input will be Salary * -1 when you need reverse order.

Avinash Perla · Accepted Answer · 2015-04-24 05:33:13Z

2

Thanks for asking this question I too faced the same problem then solved as below

var oTable=$('#example').dataTable({
filter:false
});

oTable.fnSort( [[1,"asc"], [2,"desc"]]);

hope this is helpful

answered Apr 24, 2015 at 5:33

Avinash Perla

1935 bronze badges

1 Comment

Dhaval Panchal Over a year ago

where we configure multisorting setting in datatables ?

gunr2171 · Accepted Answer · 2014-12-19 16:20:35Z

1

Here it is. It's slightly hacked, but I've been spending HOURS trying to figure out the same end goal - sorting off of two columns. http://jsfiddle.net/b2fLye17/23/

<td data-age="40">$320</td>
//In custom sort:
var value = parseInt($(td).attr('data-age') + pad(td.innerHTML.substring(1), 10, '0'));

Concept: I haven't figured out a way to access other cells outside of the column in the foreach loop, so I added a "data-" attribute to the cell that we want to sort off of. This data- attribute has the same value as the other sort column that we care about... so there is some duplicate data until we figure out how to access other 'adjacent' cells in the loop.

I combined the two values (hidden attribute and visible value) then converted back to an int to be indexed. Since the values are different lengths, I padded the second column with zeros (4086 vs 40086).

edited Dec 19, 2014 at 16:20

gunr2171

17.7k26 gold badges68 silver badges102 bronze badges

answered Dec 19, 2014 at 5:58

j0xue

261 bronze badge

1 Comment

sebmoi Over a year ago

With your example, I've been able to solve my problem with some adjustements. Thank you very much² !

Yveah · Accepted Answer · 2014-12-19 16:19:53Z

1

You can do var row = settings.aoData._aData[i]; to get all the data from the row and combining that with j0xue solution so you can sort by another column without adding a property in the html.

answered Dec 19, 2014 at 16:19

Yveah

235 bronze badges

Collectives™ on Stack Overflow

jquery-datatables multi-column sort direction

4 Answers 4

5 Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related