Jquery dataTables and tablesorter together

问题

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

回答1:

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

来源：https://stackoverflow.com/questions/6268791/jquery-datatables-and-tablesorter-together

标签

jquery

tablesorter

datatables