layui实现数据分页功能

本文实例为大家分享了layui实现数据分页功能，供大家参考，具体内容如下官网layuitable演示

本文实例为大家分享了layui实现数据分页功能，供大家参考，具体内容如下

官网layui table演示页面

示例截图：

页面引入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 //获得当前行数据
 ,layEvent = obj.event; //获得 lay-event 对应的值
 if(layEvent === 'detail'){
 viewLableInfo(data.attrId);
 layer.msg(data.attrId);
 } else if(layEvent === 'del'){
 layer.msg('删除');
 } else if(layEvent === 'edit'){
 layer.msg('编辑操作');
 }
 });
 //常规用法
 laydate.render({
 elem: '#createDate'
 });
 //常规用法
 laydate.render({
 elem: '#processingTime'
 });
 
 });
 }
 var pId = '${pGBean.pgId }';
productsearch(pId, curnum, limitcount);

业务逻辑层

@Override
 public String queryList (HttpServletRequest request) {
 String total = "";
 String pId = request.getParameter("pId");
 int currentNumber = Integer.parseInt(request.getParameter("currentNumber"));
 String currentPage = request.getParameter("currentPage") == null ? "1" : request.getParameter("currentPage");
 //分页处理，显示第一页的30条数据(默认值)
 PageHelper.startPage(Integer.parseInt(currentPage), currentNumber);
 List<PExl> list = exportDao.queryList (pId);
 if(list.size() > 0){
 total = list.get(0).getTotal();
 }
 
 Page page = PageHelper.localPage.get();
 if(page!=null){
 page.setCurrentPage(Integer.parseInt(currentPage));
 }
 PageHelper.endPage();
 
 JSONObject jsonObject = new JSONObject();
 jsonObject.put("code", 0);
 jsonObject.put("msg", "");
 jsonObject.put("count", total);
 jsonObject.put("data", list);
 //System.out.println("json:----" + jsonObject.toString());
 return jsonObject.toString();
 }

sql

其中sql在计算总数totle时可以这么写

COUNT(*) OVER(PARTITION BY 1) AS TOTAL

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

layui 数据分页