如何使Paging与Jquery tablesorter一起使用

时间:2016-02-01 12:49:17

标签: jquery

我正在使用Jquery tablesorter。

我想在表格中显示初始3条记录

我尝试使用如下所示的选项

 $(document).ready(function() {
    $(".testtable").tablesorter({
        widgets: ["filter", "scroller"],
        widgetOptions: {

        }
    }).tablesorterPager({
        container: $(".pager"),
        size: 3
    });
});

但为什么在这种情况下分页不起作用?

这是我的小提琴

http://jsfiddle.net/99p3yvv6/8/

2 个答案:

答案 0 :(得分:2)

问题不在于表格分类器,而在于加载数据。

您只是在点击标签时加载数据,您应该在 $(document).ready(function() { var datatoselect = myjsonresponse1; var html = ""; html += ''; for (var e = 0; e < datatoselect.length; e++) { html += "<tr><td>" + datatoselect[e].name + "</td><td>" + datatoselect[e].date_time + "</td></tr>" } $(".testtable tbody:visible").html(html); $(".testtable").tablesorter({ ... 功能中添加第一个标签的负载等。

修改

您可以使用点击处理程序中的代码来解决问题。 See here

$(document).ready(function() {
  //$('.ui-tabs-panel').css('display','none');
})

你需要注释掉这个:

display:none

因为通过设置tbody:visible,您将找不到任何UIScrollView,这是用于加载数据的选择器。

答案 1 :(得分:1)

你的问题在于寻呼机。您需要为每个表添加

定义单独的寻呼机
<div class="pager"> 
    <img src="http://mottie.github.com/tablesorter/addons/pager/icons/first.png" class="first"/> 
    <img src="http://mottie.github.com/tablesorter/addons/pager/icons/prev.png" class="prev"/> 
    <span class="pagedisplay"></span> <!-- this can be any element, including an input --> 
    <img src="http://mottie.github.com/tablesorter/addons/pager/icons/next.png" class="next"/> 
    <img src="http://mottie.github.com/tablesorter/addons/pager/icons/last.png" class="last"/>       
</div>

在表之后,您的tablesorter代码应该是:

$(".testtable").each(function(){
     $(this).tablesorter({
       widgets: ["filter", "scroller"],
       widgetOptions: { }
     }).tablesorterPager({
       container: $(this).parent().find(".pager"),
       size: 3
     });
});   

UPDATED FIDDLE