Search code examples
sortingtablesorter

jQuery multi-level table sorting

I am having following requirement to make sortable data table. I tried the "jquery.dataTables.min.js", but I can't get along with this plugin.

The requirement is, when I clicking on anyone column the respective column will be getting (Ascending & Descending) sorted out as like as pervasively used jQuery plugins. if I clicks on another column to be sorted out, the entire table rows should not get sorted out. So it means, whenever clicks on subsequent column header the sorting should happened only between some specific rows.

For the sake of better understanding I put below illusions one by one.

Default view of table (without sorting)...

enter image description here

After first time sorting (Ascending or Descending - doesn't matter)

enter image description here

For instance, Now i am going to click on 4th column (header) of this table...

enter image description here

Now, sorting is not happening for entire table. If you look at the red marked area of above illusion, only order is adjusted between two colored rows.

Any ideas? Can we have any plugins to match this requirement? Or any jQuery brainstorms to make this workout?

Solution

  • Both DataTables and Tablesorter allow sorting multiple columns by holding down the Shift key while clicking on the table header(s).

    I know what you mean by not getting along with the DataTables plugin, it has a fairly steep learning curve.

    I maintain a fork of tablesorter, if you are willing to check it out.

    Ok, I understand now, you don't want to use the shift key. Try this code (demo):

    $(function () {
    $('table').tablesorter({
        theme: 'blue',
        sortMultiSortKey: 'which' // default: "shiftKey",
    });
});