layui中的分页laypage
1.html部分
<div id="test1"></div>
2.js部分:
<script src="/static/build/layui.js"></script>
<script>
//执行一个laypage实例
layui.use(['laypage'],function (){
layui.laypage.render({
elem: 'test1' //元素ID,不用加#
,count: 100 //数据总数,服务端获取
,layout: ['prev', 'page', 'next', 'limit', 'skip'] //设置分页组件显示 "count"显示总数
,limits:[50,100,200,300] //可选择每页数目
,limit:10 //默认分页
,theme:'#1a70cc' //选中的颜色
,prev: '<i class="layui-icon"></i>' //前一页图标(可以写文字)
,next: '<i class="layui-icon"></i>' //后一页图标(可以写文字)
,jump: function(obj){ //分页执行
console.log(obj)
getTableList(obj.curr,obj.limit);
}
});
})
</script>
3.分页操作
laypage.render({
elem: 'test1'
,count: 70 //数据总数,从服务端得到
,jump: function(obj, first){
//obj包含了当前分页的所有参数,比如:
console.log(obj.curr); //得到当前页,以便向服务端请求对应页的数据。
console.log(obj.limit); //得到每页显示的条数
//首次不执行
if(!first){
//do something
}
}
});