站长图库向大家介绍了LayUI,数据分页等相关知识,希望对您有所帮助
我们先来看下官网的演示画面。
具体代码：
页面引入layui.css、 layui.js
<div id="pTable" style="width: 1200px;"> <table class="layui-table" id="layui_table_id" lay-filter="test"></table> <div id="laypage"></div></div>
前台js
var limitcount = 10; var curnum = 1; //列表查询方法 function productsearch(productGroupId,start,limitsize) { layui.use(['table','laypage','laydate'], function(){ var table = layui.table, laydate=layui.laydate, laypage = layui.laypage; table.render({ elem: '#layui_table_id' , url: '<%=path%>/xx/pListQuery.html?pId='+productGroupId+'¤tPage='+ start+'¤tNumber=' + limitsize /*, where:{pagename:start,pagelimit:limitsize} //传参*/ , cols: [[ {field: 'productId', title: 'ID', width: '170', sort: true} , {field: 'productName', title: '名称', width: '450'} , {field: 'productState', title: '状态', width: '100'} , {field: 'effectTime', title: '生效时间', width: '120', sort: true} , {field: 'invalidTime', title: '失效时间', width: '120', sort: true} , {field: 'productCost', title: '成本', width: '100', sort: true} , {field: 'poperation', title: '操作', width: '100',fixed: 'right', toolbar: '#barDemo'} ]] , page: false , height: 430 ,done: function(res, curr, count){ //如果是异步请求数据方式，res即为你接口返回的信息。 //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度 laypage.render({ elem:'laypage' ,count:count ,curr:curnum ,limit:limitcount ,layout: ['prev', 'page', 'next', 'skip','count','limit'] ,jump:function (obj,first) { if(!first){ curnum = obj.curr; limitcount = obj.limit; //console.log("curnum"+curnum); //console.log("limitcount"+limitcount); //layer.msg(curnum+"-"+limitcount); productsearch(productGroupId,curnum,limitcount); } } }) } }) //监听工具条 table.on('tool(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值" var data = obj.data /