现在有多个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>
效果如下:
同样实现了效果,仅供参考!
相关推荐
这是一款用jquery实现的前端数据分页插件,可以用于、<div>等,内附源码及实例。
<link rel="stylesheet" href="css/style.css?3.1.64"> [removed][removed] </head> ...<div class="piclist"> ...<div class="fydiv"> ...</div> ... jQuery的分页按钮控制动态加载图片列表代码
自己学jquery时,用jquery+.net实现的动态添加表,分页并实现显示详细信息的练习,与大家分享!
本文实例讲述了jQuery实现的分页功能。分享给大家供大家参考,具体如下: 1、分页栏HTML码 <div class=g-cf> <div xss=removed class=g-pager> </div> </div> 2、CSS样式文件 .g-cf:after {clear: both;content...
本文实例讲述了jQuery实现伪分页的方法。...在数据加载完成后便可以对table数据进行伪分页、注意div引用的class,我填充的数据是四列的,所以td里加了colspan,div是分页显示区域 <td colspan
jquery div假分页,支持添加删除后分页动态变化,只需在添加或者删除ajax方法后再次调用该方法即可。
本文实例讲述了jquery分页优化操作。分享给大家供大家参考,具体如下: 前言 上次写了博客 jquery分页显示,文章的jquery分页方式...切换分页通过,分页div的显示和隐藏来实现。 创建数据库语句 CREATE TABLE `news`
基于jquery扩展的前端分页插件,只需要将注重点放在后面json数据上,前端只需要遍历表格数据就可完成整个前端的分页操作。 PS:如遇BUG请自行修改 使用请引入css和js $("div").easyPage(url,param,function(data){ $...
最近一直研究jquery的分页效果,刚刚弄好了一个,拿出来与大家分享。分页效果与时光网的差不多。 先在aspx页面放置一个<div class=”pageDivs”></div> ,这个是用来存放分页的。 然后建一个page.js文件,具体代码...
jQuery Pagination Plugin Demo(jquery分页插件以及分页模板),只需传递一个当前页参数就可以在客户端灵活的分页.而且是无刷新的分页方式
本文实例为大家分享了jquery ajax实现分页的具体代码,供大家参考,具体内容如下 HTML <div id=list> <ul></ul> </div> <div id=pagecount></div> CSS #list{width:680px; height:530px; margin:2px auto; ...
采用Jquery无刷新分页插件jquery.pagination.js 实现无刷新分页效果 页面内容: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ...
div假分页原理:填充后div的总高度 (1000px) 显示高度(100px) 则页面总数为10页 。当查看第二页时,显示的div高度为100 – 200之间,以此类推 看见页面在翻页 实则为div滚动条移动。 <div id=applications>显示...
本文使用jQuery,结合PHP和Mysql,通过实例讲解如何实现Ajax数据加载效果。 HTML <div id=list> <ul></ul> </div> <div id=pagecount></div> 页面中,#list用来展示数据列表,包括本例要展示的商品图片和标题,...
几十种分页demo,功能一应俱全,jquery+div+css
本文实例为大家分享了jquery.pager.js实现分页的具体代码,供大家参考,具体内容如下 1.html <link href=/stylesheets/Pager.css rel=stylesheet type=text/css/> [removed][removed] <body> <div id...
代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ... <head> <title>jquery分页控件</title> [removed][removed] </head> <body> <div class=”pa
jquery自己编写的分页 只需要一句代码即可用分页 可能存在bug可留言 css需要引入http://at.alicdn.com/t/font_585440_k2m2k8ukg.css 使用例子 先写一个div <div class="app" 1px solid red;"> </div> $(".app")....
1、可修改js文件中page_show_num 可以控制每页显示多少数据,默认为10 2、修改js文件中的字段值 "<div class=\"msg_content\">"+val.msg_time+" "+val.msg_content+"</div>" 其中,val.msg_time val.msg_...