在《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");
原书中分页示例代码,用来显示第一页的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");