jQuery实现“分页”的效果，控制div分页显示
程序员文章站
2022-04-28 14:13:44
...
现在有多个div，如果完全显示在一个页面里，显得太臃肿。故而需要分页，下面是我用jquery控制每页显示个数的代码，仅供参考测试！
页面布局：
<body>
<div class="container">
<div class="box" name="box">aaaaaa1</div>
<div class="box" name="box">aaaaaa2</div>
<div class="box" name="box">aaaaaa3</div>
<div class="box" name="box">aaaaaa4</div>
<div class="box" name="box">aaaaaa5</div>
<div class="box" name="box">aaaaaa6</div>
<div class="box" name="box">aaaaaa7</div>
<div class="box" name="box">aaaaaa8</div>
<div class="box" name="box">aaaaaa9</div>
<div class="box" name="box">aaaaaa10</div>
<div class="box" name="box">aaaaaa11</div>
<div class="box" name="box">aaaaaa12</div>
<div class="box" name="box">aaaaaa13</div>
<div class="box" name="box">aaaaaa14</div>
<div class="box" name="box">aaaaaa15</div>
<div class="box" name="box">aaaaaa16</div>
<div class="box" name="box">aaaaaa17</div>
<div class="box" name="box">aaaaaa18</div>
</div>
<div id="pages"></div>
</body>
下面是控制分页显示的js：
<script>
var $div = $(".container");
var $show = $("#show");
var $pages = $("#pages");
var pgindex = 1;//当前页
var eachCnt = 8;//每页显示个数
var boxes = $("div[name='box']");
var cnt = boxes.length;
var indexs = new Array(cnt);
for(var i=0; i<cnt; i++) {
indexs[i] = i;
}
var allPages = Math.ceil(cnt/eachCnt);
$(function() {
$pages.html("total " + allPages + " pages");
showPage(1);
for(var i=0; i<allPages; i++) {
$pages.append("<a href=\"javascript:showPage('"+ (i+1) +"');\"> "+ (i+1) +" </a>");
}
$pages.append("<a href=\"javascript:gotopage(-1);\">prev</a> <a href=\"javascript:gotopage(1);\">next</a>");
});
function gotopage(value){
try{
value=="-1"?showPage(pgindex-1):showPage(pgindex+1);
}catch(e){
}
}
function showPage(pageIndex)
{
if(pageIndex== 0 || pageIndex==(allPages+1)) {
return;
}
var start = (pageIndex-1)*8;//8
//alert("start:" + start);
var end = start + 8;
end = end > cnt ? cnt : end;//16
//alert("end:" + end);
var subIndexs = indexs.slice(start, end);
for(var i=0; i<cnt; i++) {
if(contains(i, subIndexs)) {
boxes.eq(i).show();
}else{
boxes.eq(i).hide();
}
}
pgindex = pageIndex;
}
var contains = function (element, arr) {
for (var i = 0; i < arr.length; i++) {
if (arr[i] == element) {
return true;
}
}
return false;
}
//alert(contains(23, indexs));
</script>
分页效果如下：
第1页：
第3页：
这个太过“原始”了，用了下网上比较推荐的jquery.page.js插件改善了下：
<script>
var $div = $(".container");
//alert($("#pager").html());
var $show = $("#show");
var $pages = $("#pages");
var pgindex = 0;//初始当前页
var eachCnt = 8;
//var cnt = $("div", ".container").length;
//var boxes = $div.find("div");
var boxes = $("div[name='box']");
//var box = boxes.eq(0);
//alert(boxes.eq(0));
//box.hide();
var cnt = boxes.length;
//var box = boxes[0];
//alert(cnt);
var indexs = new Array(cnt);
for(var i=0; i<cnt; i++) {
indexs[i] = i;
}
var allPages = Math.ceil(cnt/eachCnt);
//alert(allPages);
$(function() {
showPage(0);
});
$("#Pagination").pagination(cnt, {
callback: pageselectCallback,//PageCallback() 为翻页调用次函数。
prev_text: " 上一页",
next_text: "下一页 ",
items_per_page: 8, //每页的数据个数
num_display_entries: 3, //两侧首尾分页条目数
current_page: pgindex, //当前页码
num_edge_entries: 2, //连续分页主体部分分页条目数
//link_to:"?page=__id__"
});
//点击翻页时回调的函数
function pageselectCallback(pageIndex, jq) {
alert("haha");
showPage(pageIndex);
}
function showPage(pageIndex)
{
var start = pageIndex*8;//8
//alert("start:" + start);
var end = start + 8;
end = end > cnt ? cnt : end;//16
//alert("end:" + end);
var subIndexs = indexs.slice(start, end);
for(var i=0; i<cnt; i++) {
if(contains(i, subIndexs)) {
boxes.eq(i).show();
}else{
boxes.eq(i).hide();
}
}
//pgindex = pageIndex;
}
var contains = function (element, arr) {
for (var i = 0; i < arr.length; i++) {
if (arr[i] == element) {
return true;
}
}
return false;
}
//alert(contains(23, indexs));
</script>
效果如下：
同样实现了效果，仅供参考！
上一篇： 通过对服务器端特性的配置加强php的安全
下一篇： 声明 Annotation 注释