最近在研究layui,发现他的分页标签特别好用,所以小小研究了一下。
先来一个分页后的效果图看一下,是不是感觉特别精致,话不多说,直接上代码!!!
下边是代码文件:
首先引入文件:
注:layer框架是基于jquery的一个弹层框架,所以jquery文件必须在他之前引入,否则会报错。
<link rel="stylesheet" href="layui/css/layui.css" />
<link rel="stylesheet" href="layui/css/layui.mobile.css" />
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="layui/layui.js"></script>
Html:
<center>
<div id="yscxPage"></div>
</center>
Js:
这里就直接写ajax调用成功后的内容
success: function(datas) {
if(page==undefined||page==""||page==null){
var laypage = layui.laypage;
laypage.render({
elem: 'yscxPage' //注意,这里的 yscxPage 是 ID,不用加 # 号
,groups:3 //所显示的页码数
,count:datas.page.totalResult //数据总数,从服务端得到
,jump: function(obj, first){
//obj包含了当前分页的所有参数,比如:
//console.log(obj.curr); //得到当前页,以便向服务端请求对应页的数据。
// console.log(obj.limit); //得到每页显示的条数
// getYscx(obj.curr);
//首次不执行
if(!first){
getYscx(obj.curr);
//do something
}
}
});
page =1;
}
$("#Tbody").html("");
var options="";
$.each(datas.querywaterList,function (index, val) {
options += "<tr ><td>" + ((page-1)*10+index+1) + "</td>" + "<td>" + val.FLOWNUM.toFixed(2) + "</td>" + "<td>" + new Date(val.UPDATE_DATE).format("yyyy-MM-dd hh:mm:ss") + "</td></tr>" ;
});
$("#Tbody").append(options);
},
附上官方文档:https://www.layui.com/doc/modules/laypage.html
里边有具体的操作方法,非常全面!
希望可以帮到你,有什么疑问可以随时提出来,我师父教我的。