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

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

(0)

相关推荐

  • Layui实现带查询条件的分页

    本文实例为大家分享了Layui实现带查询条件的分页,供大家参考,具体内容如下 这个前端UI框架是真的让人又爱又恨呐!想了很久的方案才行的通 这是全部源码: {include file="../../../application/admin/view/public/head" /} <div class="page-container p10"> <form class="layui-form " method="pos

  • 基于LayUI实现前端分页功能的方法

    一.LayUI介绍 Layui 是一款采用自身模块规范编写的国产前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用.内置了一些常用元素和组件的UI框架. 下载地址为http://www.layui.com/,下载后引入项目中. <link rel="stylesheet" href="${pageContext.request.contextPath}/css/layui/css/layui.css" rel="exte

  • layui实现动态和静态分页

    开发管理后台是每一个开发人员都要熟悉的一个环节,作为后端程序员,公司的所有机密数据都掌握在我们手上,所以这个时候,如果不是公司的核心成员,是不能接触到某些数据的,这个时候所有的工作都落到了我们的手上,从PS到Linux都需要我们亲历亲为,还好发现了layui这个前端框架,很大程度上减轻了我们的压力. 今天我们先来学习一下layui实现动态数据表,静态数据表,以及表格的分页,其中还涉及到动态刷新数据表,数据表工具栏使用,表单提交等功能,这个静态分页同样适用在信息类网站,我的工作开发环境是debia

  • layui分页效果实现代码

    本文实例为大家分享了layui分页效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>分页</title> <link rel="stylesheet" href="layui/css/layui.css" > </head> <body

  • 基于LayUI分页和LayUI laypage分页的使用示例

    本文介绍了LayUI分页,LayUI动态分页,LayUI laypage分页,LayUI laypage刷新当前页,分享给大家,具体如下: 效果图:  一.引用js依赖 主要是jquery-1.11.3.min.js 和 layui.all.js , json2.js用来做json对象转换的 <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.11.3.m

  • 深入理解jQuery layui分页控件的使用

    $.getJSON( )的使用方法简介 $.getJSON( url [, data ] [, success(data, textStatus, jqXHR) ] ) url是必选参数,表示json数据的地址: data是可选参数,用于请求数据时发送数据参数: success是可参数,这是一个回调函数,用于处理请求到的数据. //内容页面 <br> <div id="notice_div"></div><br> //分页控件 <d

  • 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"> &

  • layui实现数据分页功能(ajax异步)

    最近项目要使用layUI的分页,看了官方demo感觉还是不太清晰,摸索了一下,现在记录一下. 一.引入layUI的相关资源 <link rel="stylesheet" href="${ctxPath}/vendor/layui-v2.4.5/layui/css/layui.css" rel="external nofollow" > <script src="${ctxPath}/vendor/layui-v2.4.

  • Python Django实现layui风格+django分页功能的例子

    第一步:首先定义一个视图函数,用于提供数据,实现每页显示数据个数,返回每页请求数据 from django.shortcuts import render from django.core.paginator import Paginator # Django内置分页功能模块 def index(request): # 提供json数据 resp = {"id":10000,"username":"user-0","sex":

  • vue实现的上拉加载更多数据/分页功能示例

    本文实例讲述了vue实现的上拉加载更多数据/分页功能.分享给大家供大家参考,具体如下: 加载状态 <div v-if='has_log == 0'> <load-more tip="上拉加载" :show-loading="false" background-color="#fbf9fe"></load-more> </div> <div v-if='has_log == 1'> <

  • layui实现数据表格table分页功能(ajax异步)

    layui实现数据表格table分页功能,异步加载,表格渲染,含条件查询. 一.引入layUI的相关资源 <link rel="stylesheet" href="${ctxPath}/vendor/layui/css/layui.css" rel="external nofollow" > <script src="${ctxPath}/vender/layui/layui.js" charset=&quo

  • layui数据表格实现重载数据表格功能(搜索功能)

    layui数据表格实现重载数据表格功能,以搜索功能为例 加载数据表格 实现搜索功能和数据表格重载 全部代码 加载数据表格 按照layui官方文档示例 HTML部分 <table id="demo" lay-filter="test"></table> JavaScript部分 var table = layui.table; //执行渲染 table.render({ elem: '#demo' //指定原始表格元素选择器(推荐id选择器)

  • layui的数据表格+springmvc实现搜索功能的例子

    如下所示: 主要在前端页面加: <div class="demoTable"> 搜索ID: <div class="layui-inline"> <input class="layui-input" name="keyWord" id="keyWord" autocomplete="off"> </div> <span class=&

  • JS实现table表格数据排序功能(可支持动态数据+分页效果)

    asp.net会经常遇到分页的效果,尤其是希望实现静态的html分页排序(html分页相信大家都已经有自己的解决方案.在这里就不多说).我写了一个简单的Demo排序. 数据就是字母和数字两组.(汉字需要找到asc码) 原理就是利用数组自带的sort排序,进行表格重组.已在.net mvc 中测试过.支持分页.(申明一点.只对当前页面数据排序 无刷新,对所有页面排序的话,肯定需要刷新.这点我还在解决中.)希望有新想法的高手们,给下指点. 下面把html的代码贴出来: <!DOCTYPE HTML

随机推荐