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 相关文章推荐
用JavaScript对JSON进行模式匹配(Part 1-设计)
Jul 17 Javascript
jQuery提示效果代码分享
Nov 20 Javascript
浅谈JavaScript实现面向对象中的类
Dec 09 Javascript
jquery中ajax跨域方法实例分析
Dec 18 Javascript
jQuery+ajax简单实现文件上传的方法
Jun 03 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
Jun 13 Javascript
javascript类型系统_正则表达式RegExp类型详解
Jun 24 Javascript
微信小程序点击控件修改样式实例详解
Jul 07 Javascript
带你快速理解javascript中的事件模型
Aug 14 Javascript
vue路由前进后退动画效果的实现代码
Dec 10 Javascript
javascript实现计算器功能
Mar 30 Javascript
Quasar Input:type=&quot;number&quot; 去掉上下小箭头 实现加减按钮样式功能
Apr 09 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/17 PHP
PHP编写简单的App接口
2016/08/28 PHP
php redis实现对200w用户的即时推送
2017/03/04 PHP
PHP基于关联数组20行代码搞定约瑟夫问题示例
2017/11/07 PHP
php记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
PHP静态方法和静态属性及常量属性的区别与介绍
2019/03/22 PHP
Javascript 圆角div的实现代码
2009/10/15 Javascript
jQuery选择器的工作原理和优化分析
2011/07/25 Javascript
屏蔽网页右键复制和ctrl+c复制的js代码
2013/01/04 Javascript
javascript检查浏览器是否支持flash的实现代码
2014/08/14 Javascript
jQuery页面加载初始化的3种方法(推荐)
2016/06/02 Javascript
AngularJS ng-mousedown 指令
2016/08/02 Javascript
jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法
2016/12/24 Javascript
JS+WCF实现进度条实时监测数据加载量的方法详解
2017/12/19 Javascript
详解javascript函数写法大全
2019/03/25 Javascript
新手入门js闭包学习过程解析
2019/10/08 Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
2020/03/04 Javascript
[02:53]DOTA2英雄昆卡基础教程
2013/11/25 DOTA
Python内置的字符串处理函数整理
2013/01/29 Python
Django中传递参数到URLconf的视图函数中的方法
2015/07/18 Python
numpy使用技巧之数组过滤实例代码
2018/02/03 Python
在Python中通过getattr获取对象引用的方法
2019/01/21 Python
python实战串口助手_解决8串口多个发送的问题
2019/06/12 Python
pytorch 实现cross entropy损失函数计算方式
2020/01/02 Python
python图形开发GUI库pyqt5的详细使用方法及各控件的属性与方法
2020/02/14 Python
Django后端分离 使用element-ui文件上传方式
2020/07/12 Python
超30万乐谱下载:Musicnotes.com
2016/09/24 全球购物
C语言如何决定使用那种整数类型
2016/11/26 面试题
大学生自荐书范文
2013/12/10 职场文书
《挑山工》的教学反思
2014/02/16 职场文书
十岁生日答谢词
2015/01/05 职场文书
2015年国际护士节演讲稿
2015/03/18 职场文书
2016年5月份红领巾广播稿
2015/12/21 职场文书
2019年第四季度财务部门工作计划
2019/11/02 职场文书
SQLServer2008提示评估期已过解决方案
2021/04/12 SQL Server
磁贴还没死, 微软Win11可修改注册表找回Win10开始菜单
2021/11/21 数码科技