此js分页适用于数据量较小的情形利用:引入js文件,参考https://www.jq22.com/jquery-info10344按文件内构造引入干系资源 创建div 在此div上初始化分页更多模板访问http://www.jq22.com
<div class="zxf_pagediv"></div><script type="text/javascript"> / js实现分页,适用于数据div被外层div包含的情形 <div id="masonry"> <div src="data"/> <div src="data"/> <div src="data"/> ... </div> / var len = 12;//定义每页长度 var $wrapper = $("div#" + "masonry"); / 业务逻辑 / var all = $wrapper.find("div").length;//所有记录数 var cnt = Math.ceil(all / len);.//总页数 var pre = 1;//记录之前的页数 // function show(page,len,attr) { var start = (page-1) len; var end = start + len; for (var i = start ; i < end;i++) $wrapper.find("div:eq(" + i + ")").attr("style","display:"+attr+";"); } //show(1,all,'none');//关闭所有div显示,性能更好一点该当是做事器端在每个div上加display:none show(1,len,'block');//显示第一页 //翻页 $(".zxf_pagediv").createPage({ pageNum: cnt, current: 1, backfun: function(e) { if (e.current < 1 || e.current > cnt){ alert('当前页数不存在,回到首页!
'); e.current = 1; } show(pre,len,'none');//隐蔽上一页 show(e.current,len,'block');//显示当前页 pre = e.current;//记录当前页 } });</script>