Jquery dataTables and tablesorter together

Question

I had this requirement of paginating the data being shown in the table and fetching it through ajax calls - this I accomplished by using dataTables plugin with the following configuration -

bServerSide : true;
sAjaxSource : <ajax_source>
bPaginate : true,
bSort:false,
bFilter:false

I also had a requirement of sorting this data client side, i.e. only on the current page and not the whole set (See this). For this I tried tablesorter plugin using the following code-

 "fnServerData": function(sSource, aoData, fnCallback){
                    $.ajax({
                        "dataType": "json",
                        "contentType": "application/json",
                        "type" : "GET",
                        "url" : sSource,
                        "data" : aoData,
                        "success" : function (jsonData){
                            fnCallback(jsonData);
                            $("#companies").tablesorter();
                        }
                    });
               }

But to my surprise, even though the sorting works fine on the first page, as soon as I move on to the subsequent pages, as soon as I click on the column header it starts showing all the rows on the previous page as well, which is undesirable.

Can someone please explain, what might be going wrong here.

Edit: $("#companies").trigger("update"); did the trick

You're getting twice as many rows when you sort on the second page? — DOK
yes, which should not be the case as the table is paginated and the number of rows at second page should only be considered while sorting. — kshtjsnghl
That's puzzling. I see quite a few items over to the right here >>> which appear to be related questions that just might help you figure this out. — DOK
Great! I edited your question to include your solution so people will see it. Editing your questions is perfectly acceptable for you to do in the future. — DOK

kshtjsnghl kshtjsnghl · Accepted Answer · 2011-06-08T04:46:18

It worked with the following change - bringing the tablesorter initialisation out

 $("#companies").tablesorter();

and trigger update after every ajax call.

"success" : function (jsonData) {
    fnCallback(jsonData);
    $("#companies").trigger("update");
}

Jquery dataTables and tablesorter together

1 Answers