Jquery Tablesorter sort same column after update

Question

I have a table which is updated with ajax and after update it if sorted but I need to sort not a fixed column but the same column which was last clicked before update.

function tableUpdated() {
$(".tablesorter").trigger("update");
//alert($(".tablesorter").sorting);
var sorting = [[7, 0]];
$("table").trigger("sorton", [sorting]);
}

In my code above I need to put my selected column index instead of 7

Collis

Answer 1

jQuery's .data() will help you here. Whenever the user clicks to sort a table, store the columns on the table itself. Within the sort function, add this:

$("#table").data('sorting', selectedColumn);

Now the element with id="table" has a property sorting with the value of selectedColumn. In tableUpdated, you can use this data:

function tableUpdated() {
    $(".tablesorter").trigger("update");
    var sorting = [[$("#table").data('sorting'), 0]];
    $("#table").trigger("sorton", [sorting]);
}

Data added using .data() can be even more complex, allowing you to add objects of data. See this page for more details.

Baggott

first: thanks for this. Second: doesn't the 0 in data lookup make it default to ascending\descending (I forget which it is) and not the user selected value? – Carbolated

@javamonkey79: Assuming that's what the 0 is, you're right. This might be another good place to use .data(). Save the direction of the sort as another property on the table, and update it when the direction of the sort is changed. – Baggott

But how do we define selectedColumn? – Tolmach

same here, how you define selectedColumn ? – Tiatiana

Answer 2

Using your code, you can do something like this (suppose your table id is #list-table) to maintain current table sorting:

function tableUpdated() {
    $("#list-table").trigger("update");
    var sorting = $("#list-table").get(0).config.sortList;
    $("#list-table").trigger("sorton", [sorting]);
}

Shrievalty

Answer 3

you can pick it up on the 'sortEnd' event on your table:

var lastSortList;

$table.on('sortEnd', function(e) {
    lastSortList = e.target.config.sortList;
});

Advent

Answer 4

After battling with this for a day or so I found the datatables plugin which has state saving out of the box. I hope this helps someone else.

Carbolated

Answer 5

Here you can order with the same column and add a new one to sorter

var sorting = $("table").get(0).config.sortList;
sorting.push([2,0]); // add an element to the array
$("table").trigger("sorton", [sorting]);

Rochdale

Answer 6

It might a bit less overhead to save the last sort only when starting ajax like this:

lastSortList=$("table")[0].config.sortList;

Then get it back in after update like this:

$("table").trigger("sorton", [lastSortList]);

Remember to declare the first line in the right scope though.

Barathea