jQuery中的lt和gt方法之不支持该属性的解决方法

在《Learning jQuery》-Better Interaction Design and Web Development with Simple JavaScript Techniques一书中,作者Jonathan Chaffer 和Karl Swedberg 提供的代码中部分函数在新版的jQuery中已经去掉,所以书中提供的分页示例代码无法使用,在国外网站找到解决办法。
原书中分页示例代码,用来显示第一页的10行数据:
$(document).ready(function() {
$('table.paginated').each(function() {
var currentPage = 0;
var numPerPage = 10;
var $table = $(this);
$table.find('tbody tr').show()
.lt(currentPage * numPerPage)
.hide()
.end()
.gt((currentPage + 1) * numPerPage - 1)
.hide()
.end();
});
});

需要将原代码做如下替换,就可以正常进行分页了:
移除.lt(currentPage * numPerPage) 用.slice(0, currentPage * numPerPage)替代...

移除.gt((currentPage + 1) * numPerPage - 1) 用.slice((currentPage + 1) * numPerPage - 1)代替

另外可以把分页处理修改为:
$table.find('tbody tr').hide()
.slice(currentPage * numPerPage, (currentPage + 1) * numPerPage - 1)
.show();
也可达到同样之效果。
这个代码我在使用中,发现要将numPerPage-1改为numPerPage。各位在测试中看看是否正确。

关于slice函数在jQuery中的定义与JavaScript中的定义一致:.slice()用来从匹配的jQuery对象中分离出一部分jQuery对象。下面是调用slice()方法的一些正确方式:
JavaScript代码
$("div").slice(0,1); // 第一个 div
$("div").slice(-1); // 最后一个 div
$("div").slice(1,-1); // 除第一个最后一个的所有 div
$("div").slice(1,3); // 第二个和第三个 div
$("div").slice(7,8); // 第八个 div
slice中两个参数的定义slice(start,end):
start Integer
Where to start the subset. The first element is at zero. Can be negative to start from the end of the selection.
end (Optional) Integer
Where to end the subset (does not include the end element itself). If unspecified, ends at the end of the selection.

今天编写完数据分页,总结一下,完整的分页算法:
//对建立完好的表格进行分页处理
$("table.sortable").each(function(){
var currentPage = 0;
var numPerPage = 10;
var $table = $(this);
$table.bind("repaginate", function() {
$table.find('tbody tr').hide()
.slice(currentPage * numPerPage, (currentPage + 1) * numPerPage)
.show();
});//repaginate

var numRows = $('table.sortable').find("tbody tr").length;
var numPages = Math.ceil(numRows/numPerPage);
var $pager = $('<div class="page"></div>');
for(var page=0;page<numPages;page++){
$('<a href=# ><span class="page-number">' + (page + 1) + '</span></a>').bind("click", { "newPage": page }, function(event) {
currentPage = event.data["newPage"];
$table.trigger("repaginate");
$(this).addClass("active").siblings().removeClass("active");
}).appendTo($pager);
$pager.append(" ");
} //for
$pager.find("span.page-number:first").addClass("active");
$pager.insertAfter($table);
$table.trigger("repaginate");
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值