layui实现数据分页功能


Posted in Javascript onJuly 27, 2019

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

官网layui table演示页面

示例截图:

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 //获得当前行数据
     ,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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery知识点二 jquery下对数组的操作
Jan 15 Javascript
jquery文字上下滚动的实现方法
Mar 22 Javascript
jquery 实现密码框的显示与隐藏示例代码
Sep 18 Javascript
js清空form表单中的内容示例
May 20 Javascript
JavaScript字符串对象substr方法入门实例(用于截取字符串)
Oct 16 Javascript
jquery实现公告翻滚效果
Feb 27 Javascript
JS实现简单拖拽效果
Jun 21 Javascript
微信小程序tabBar用法实例详解
Dec 04 Javascript
Vue将页面导出为图片或者PDF
Aug 17 Javascript
layui中select,radio设置不生效的解决方法
Sep 05 Javascript
JS数组扁平化、去重、排序操作实例详解
Feb 24 Javascript
小程序实现上传视频功能
Aug 18 Javascript
layUI实现列表查询功能
Jul 27 #Javascript
Layui实现带查询条件的分页
Jul 27 #Javascript
layui数据表格实现重载数据表格功能(搜索功能)
Jul 27 #Javascript
layui表格数据重载
Jul 27 #Javascript
基于layui实现高级搜索(筛选)功能
Jul 26 #Javascript
微信小程序 如何获取网络状态
Jul 26 #Javascript
layui使用数据表格实现购物车功能
Jul 26 #Javascript
You might like
深入PHP运行环境配置的详解
2013/06/04 PHP
PHP-FPM的配置与优化讲解
2019/03/15 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
javascript之典型高阶函数应用介绍
2013/01/10 Javascript
利用jquery包将字符串生成二维码图片
2013/09/12 Javascript
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
2013/10/22 Javascript
js与jquery实时监听输入框值的oninput与onpropertychange方法
2015/02/05 Javascript
浅谈Jquery核心函数
2015/06/18 Javascript
JavaScript中利用Array和Object实现Map的方法
2015/07/27 Javascript
使用plupload自定义参数实现多文件上传
2016/07/19 Javascript
js中json处理总结之JSON.parse
2016/10/14 Javascript
详解JavaScript中this的指向问题
2017/01/20 Javascript
VueJs 搭建Axios接口请求工具
2017/11/20 Javascript
微信小程序实现评论功能
2018/11/28 Javascript
JS实现简易留言板特效
2019/12/23 Javascript
[02:45]DOTA2英雄敌法师基础教程
2013/11/25 DOTA
pycharm 使用心得(三)Hello world!
2014/06/05 Python
在cmd中运行.py文件: python的操作步骤
2018/05/12 Python
python pandas实现excel转为html格式的方法
2018/10/23 Python
Python递归函数 二分查找算法实现解析
2019/08/12 Python
解决在pycharm运行代码,调用CMD窗口的命令运行显示乱码问题
2019/08/23 Python
应届大学生的推荐信
2013/11/20 职场文书
学前教育毕业生自荐信范文
2013/12/24 职场文书
大课间活动制度
2014/01/18 职场文书
应届中专生自荐书范文
2014/02/13 职场文书
2014学校庆三八妇女节活动总结
2014/03/01 职场文书
2014两会学习心得:时代的发展
2014/03/17 职场文书
学生保证书范文
2014/04/28 职场文书
班级旅游计划书
2014/05/03 职场文书
大学生入党积极分子自我评价
2014/09/20 职场文书
幸福家庭事迹材料
2014/12/20 职场文书
医院科室评语
2015/01/04 职场文书
PHP设计模式(观察者模式)
2021/07/07 PHP
详解Golang如何优雅的终止一个服务
2022/03/21 Golang
Github 使用python对copilot做些简单使用测试
2022/04/14 Python
Win11更新失败并提示0xc1900101
2022/04/19 数码科技