我正在使用Jquery tablesorter。
我想在表格中显示初始3条记录
我尝试使用如下所示的选项
$(document).ready(function() {
$(".testtable").tablesorter({
widgets: ["filter", "scroller"],
widgetOptions: {
}
}).tablesorterPager({
container: $(".pager"),
size: 3
});
});
但为什么在这种情况下分页不起作用?
这是我的小提琴
答案 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
});
});