layui实现数据分页功能

 更新时间:2019年07月27日 11:58:59   作者:阿杜_ardo   我要评论
这篇文章主要为大家详细介绍了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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持澳门金沙网上娱乐。

相关文章

  • js获取checkbox值的方法

    js获取checkbox值的方法

    这篇文章主要介绍了js获取checkbox值的方法,涉及js针对节点的操作技巧,非常具有实用价值,需要的朋友可以参考下
    2015-01-01
  • 原生JavaScript制作计算器

    原生JavaScript制作计算器

    本文给大家汇总了2个原生JavaScript实现的计算器功能的代码,一个简单一个稍微复杂些,小伙伴们根据自己的需要来选择吧
    2016-10-10
  • 微信小程序入门教程

    微信小程序入门教程

    本篇文章主要介绍了微信小程序入门教程,现在分享给大家,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2016-11-11
  • 浅谈javascript实现八大排序

    浅谈javascript实现八大排序

    排序有内部排序和外部排序,内部排序是数据记录在内存中进行排序,而外部排序是因排序的数据很大,一次不能容纳全部的排序记录,在排序过程中需要访问外存。我们这里说说八大排序就是内部排序。
    2015-04-04
  • 详解js实时获取并显示当前时间的方法

    详解js实时获取并显示当前时间的方法

    这篇文章主要介绍了js实时获取并显示当前时间的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • JS使用replace()方法和正则表达式进行字符串的搜索与替换实例

    JS使用replace()方法和正则表达式进行字符串的搜索与替换实例

    这篇文章主要介绍了JS使用replace()方法和正则表达式进行字符串的搜索与替换实例,需要的朋友可以参考下
    2014-04-04
  • 微信小程序实现之手势锁功能实例代码

    微信小程序实现之手势锁功能实例代码

    这篇文章主要介绍了微信小程序实现之手势锁功能的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-07-07
  • JS实现点击拉拽轮播图pc端移动端适配

    JS实现点击拉拽轮播图pc端移动端适配

    本文通过实例代码给大家介绍了JS点击拉拽轮播图pc端移动端适配 ,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09
  • JSON.parse()和JSON.stringify()使用介绍

    JSON.parse()和JSON.stringify()使用介绍

    这篇文章主要介绍了JSON.parse()和JSON.stringify()使用,需要的朋友可以参考下
    2014-06-06
  • javascript中去除数组重复元素的实现方法【实例】

    javascript中去除数组重复元素的实现方法【实例】

    下面小编就为大家带来一篇javascript中去除数组重复元素的实现方法【实例】。小编觉得挺不错的,现在分享给大家,也给大家做个参考,一起跟随小编过来看看吧
    2016-04-04

最新评论