网站:
http://www.layui.com/doc/modules/laypage.html
<!--分页--> <div class="layer-left-box-foot-right"> <div id="pageDemo"></div> </div>
html页面的js代码:
<!--分页js-->
<script>
var sum='{{ d.data.size}}'; //后台页面传过来的数据大小 假如:sum=100
var pages=Math.ceil(sum/10); //页面的分页大小 pages=100/10=10
var curr='{{d.curr}}';
layui.use(['layer', 'laypage', 'element'], function(){
var layer = layui.layer
,laypage = layui.laypage
//分页
laypage({
cont: 'pageDemo',//容器。值支持id名、原生dom对象,jquery对象,
pages: pages, //可以叫服务端把总页数放在某一个隐藏域,再获取。假设我们获取到的是18
curr: curr, //当前页,页面点击
skip:true, //开启跳转
hash: curr, //跳转到哪一个页面
jump: function(e, first){ //触发分页后的回调
if(!first){ //一定要加此判断,否则初始时会无限刷新
var pageNum=e.curr*10-10; //这是后台需要接受的值,我们采用的是mysql,limit去查询数据,pageNum这个值是查询数据的起始数据。
location.href = '?pageNum='+pageNum; // 比如:http://localhost:8888/admin/goods?pageNum=10
}
}
});
});
</script>
后台使用的是nodejs:
var page=""; //用来存放页面传过来的值 console.log("req.query.pageNum:"+req.query.pageNum) if(req.query.pageNum == undefined){ page=0; }else{ page=req.query.pageNum; } var numpage=parseInt(page)+10; var curr=parseInt(numpage/10); console.log("数据起始位置:"+page); var a = {pageNo:page};//goodsStatus:0,
自己慢慢琢磨出来的,非常好用的分页。
效果: