Jquery dataTables 和 tablesorter 一起使用 [英] Jquery dataTables and tablesorter together

问题描述

我需要对表中显示的数据进行分页并通过 ajax 调用获取它 - 这是我通过使用具有以下配置的 dataTables 插件实现的 -

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

我还需要对这个数据客户端进行排序，即只在当前页面上而不是整个页面上(见这个).为此，我使用以下代码尝试了 tablesorter 插件-

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.

$("#companies").trigger("update"); 成功了

推荐答案

它适用于以下更改 -带出tablesorter初始化

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

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

并在每次 ajax 调用后触发更新.

and trigger update after every ajax call.

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

这篇关于Jquery dataTables 和 tablesorter 一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！