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 相关文章推荐
js wmp操作代码小结(音乐连播功能)
Nov 08 Javascript
node.js中的fs.appendFileSync方法使用说明
Dec 17 Javascript
ECMAScript 5中的属性描述符详解
Mar 02 Javascript
jQuery获取页面元素绝对与相对位置的方法
Jun 10 Javascript
高性能JavaScript DOM编程(1)
Aug 11 Javascript
Node.js+Express配置入门教程
May 19 Javascript
Vue项目组件化工程开发实践方案
Jan 09 Javascript
MVVM 双向绑定的实现代码
Jun 21 Javascript
解决vue 绑定对象内点击事件失效问题
Sep 05 Javascript
原生JavaScript实现日历功能代码实例(无引用Jq)
Sep 23 Javascript
解决vue $http的get和post请求跨域问题
Jun 07 Vue.js
Vue.Draggable实现交换位置
Apr 07 Vue.js
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 文件上传模型,支持多文件上传
2009/08/13 PHP
PHP常见过waf webshell以及最简单的检测方法
2019/05/21 PHP
jquery与google map api结合使用 控件,监听器
2010/03/04 Javascript
Jquery Ajax学习实例5 向WebService发出请求,返回泛型集合数据的异步调用
2010/03/17 Javascript
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
2010/09/14 Javascript
JavaScript:new 一个函数和直接调用函数的区别分析
2013/07/10 Javascript
js设置文本框中焦点位置在最后的示例代码(简单实用)
2014/03/04 Javascript
利用原生JavaScript获取元素样式只是获取而已
2014/10/08 Javascript
有关json_decode乱码及NULL的问题
2015/10/13 Javascript
JavaScript实现瀑布流布局
2020/06/28 Javascript
全国省市二级联动下拉菜单 js版
2016/05/10 Javascript
JS高级运动实例分析
2016/12/20 Javascript
JavaScript 保护变量不被随意修改的实现代码
2017/09/27 Javascript
解决node-sass偶尔安装失败的方法小结
2018/12/05 Javascript
React性能优化系列之减少props改变的实现方法
2019/01/17 Javascript
利用JavaScript将Excel转换为JSON示例代码
2019/06/14 Javascript
微信小程序实现滚动加载更多的代码
2019/12/06 Javascript
vue移动端使用canvas签名的实现
2020/01/15 Javascript
原生JavaScript实现留言板
2021/01/10 Javascript
Python中.py文件打包成exe可执行文件详解
2017/03/22 Python
python selenium 对浏览器标签页进行关闭和切换的方法
2018/05/21 Python
python3+PyQt5 创建多线程网络应用-TCP客户端和TCP服务器实例
2019/06/17 Python
Python标准库itertools的使用方法
2020/01/17 Python
Selenium使用Chrome模拟手机浏览器方法解析
2020/04/10 Python
python如何变换环境
2020/07/21 Python
python利用paramiko实现交换机巡检的示例
2020/09/22 Python
找到不普通的东西:Bonanza
2016/10/20 全球购物
统计每一学生的平均成绩
2014/06/06 面试题
一道SQL存储过程面试题
2016/10/07 面试题
J2EE包括哪些技术
2016/11/25 面试题
会计职业生涯规划范文
2014/01/04 职场文书
会计助理岗位职责
2014/02/17 职场文书
2014年机关工会工作总结
2014/12/19 职场文书
初中差生评语
2014/12/29 职场文书
药房管理制度范本
2015/08/06 职场文书
如何书写民事调解协议书?
2019/06/25 职场文书