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 相关文章推荐
THREE.JS入门教程(5)你应当知道的十件事
Jan 24 Javascript
24款热门实用的jQuery插件推荐
Dec 24 Javascript
javascript实现获取浏览器版本、浏览器类型
Dec 02 Javascript
jQuery如何获取动态添加的元素
Jun 24 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
Dec 28 Javascript
vue下拉菜单组件(含搜索)的实现代码
Nov 25 Javascript
Vue实现移动端左右滑动效果的方法
Nov 27 Javascript
JavaScript显式数据类型转换详解
Mar 18 Javascript
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 jQuery
ES6扩展运算符和rest运算符用法实例分析
May 23 Javascript
小程序中的箭头函数的具体使用
Jun 19 Javascript
Vue如何实现监听组件原生事件
Jul 03 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去除字符串换行符示例分享
2014/02/13 PHP
ThinkPHP提交表单时默认自动转义的解决方法
2014/11/25 PHP
PHP 500报错的快速解决方法
2016/12/14 PHP
chrome原生方法之数组
2011/11/30 Javascript
更换select下拉菜单背景样式的实现代码
2011/12/20 Javascript
如何使用Javascript正则表达式来格式化XML内容
2013/07/04 Javascript
JQuery的$命名冲突详细解析
2013/12/28 Javascript
ExtJs动态生成treepanel的Json格式
2015/07/19 Javascript
JS碰撞运动实现方法详解
2016/12/15 Javascript
JavaScript条件判断_动力节点Java学院整理
2017/06/26 Javascript
bootstrap实现二级下拉菜单效果
2017/11/23 Javascript
详解TypeScript+Vue 插件 vue-class-component的使用总结
2019/02/18 Javascript
微信小程序云开发实现增删改查功能
2019/05/17 Javascript
Echarts地图添加引导线效果(labelLine)
2019/09/30 Javascript
webpack 最佳配置指北(推荐)
2020/01/07 Javascript
JS数组方法shift()、unshift()用法实例分析
2020/01/18 Javascript
js 数组当前行添加数据方法详解
2020/07/28 Javascript
[03:22]DSPL第一期精彩集锦:酷炫到底!
2014/11/07 DOTA
采用python实现简单QQ单用户机器人的方法
2014/07/03 Python
python实现扫描ip地址的小程序
2019/04/16 Python
python pyinstaller打包exe报错的解决方法
2019/11/02 Python
Python计算不规则图形面积算法实现解析
2019/11/22 Python
pip安装提示Twisted错误问题(Python3.6.4安装Twisted错误)
2020/05/09 Python
浅谈Python中的字符串
2020/06/10 Python
python删除文件、清空目录的实现方法
2020/09/23 Python
详解Django中异步任务之django-celery
2020/11/05 Python
python unichr函数知识点总结
2020/12/16 Python
css3 中的新特性加强记忆详解
2016/04/16 HTML / CSS
国际化的太阳镜及太阳镜配件零售商:Sunglass Hut
2016/07/26 全球购物
伊莱克斯(Electrolux)俄罗斯网上商店:瑞典家用电器品牌
2021/01/23 全球购物
什么是View State?
2013/01/27 面试题
化妆品促销方案
2014/02/24 职场文书
房屋产权证明书
2014/10/15 职场文书
升学宴家长答谢词
2015/09/29 职场文书
2016年村干部公开承诺书(公开承诺事项)
2016/03/25 职场文书
分享mysql的current_timestamp小坑及解决
2021/11/27 MySQL