layui实现数据分页功能

本文实例为大家分享了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

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