> 웹 프론트엔드 > 레이이 튜토리얼 > Layui가 데이터 페이징 기능을 구현하는 방법

Layui가 데이터 페이징 기능을 구현하는 방법

王林
풀어 주다: 2021-02-07 11:03:13
앞으로
4828명이 탐색했습니다.

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>
로그인 후 복사

front-end js

var limitcount = 10;
 var curnum = 1;
 //列表查询方法
 function productsearch(productGroupId,start,limitsize) {
  layui.use([&#39;table&#39;,&#39;laypage&#39;,&#39;laydate&#39;], function(){
   var table = layui.table,
    laydate=layui.laydate,
    laypage = layui.laypage;
   table.render({
    elem: &#39;#layui_table_id&#39;
    , url: &#39;<%=path%>/xx/pListQuery.html?pId=&#39;+productGroupId+&#39;¤tPage=&#39;+ start+&#39;¤tNumber=&#39; + limitsize
    /*, where:{pagename:start,pagelimit:limitsize} //传参*/
    , cols: [[
     {field: &#39;productId&#39;, title: &#39;ID&#39;, width: &#39;170&#39;, sort: true}
     , {field: &#39;productName&#39;, title: &#39;名称&#39;, width: &#39;450&#39;}
     , {field: &#39;productState&#39;, title: &#39;状态&#39;, width: &#39;100&#39;}
     , {field: &#39;effectTime&#39;, title: &#39;生效时间&#39;, width: &#39;120&#39;, sort: true}
     , {field: &#39;invalidTime&#39;, title: &#39;失效时间&#39;, width: &#39;120&#39;, sort: true}
     , {field: &#39;productCost&#39;, title: &#39;成本&#39;, width: &#39;100&#39;, sort: true}
     , {field: &#39;poperation&#39;, title: &#39;操作&#39;, width: &#39;100&#39;,fixed: &#39;right&#39;, toolbar: &#39;#barDemo&#39;}
    ]]
    , page: false
    , height: 430
    ,done: function(res, curr, count){
     //如果是异步请求数据方式,res即为你接口返回的信息。
     //如果是直接赋值的方式,res即为:{data: [], count: 99} data为当前页数据、count为数据总长度
     laypage.render({
      elem:&#39;laypage&#39;
      ,count:count
      ,curr:curnum
      ,limit:limitcount
      ,layout: [&#39;prev&#39;, &#39;page&#39;, &#39;next&#39;, &#39;skip&#39;,&#39;count&#39;,&#39;limit&#39;]
      ,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(&#39;tool(test)&#39;, function(obj){ //注:tool是工具条事件名,test是table原始容器的属性 lay-filter="对应的值"
    var data = obj.data //获得当前行数据
     ,layEvent = obj.event; //获得 lay-event 对应的值
    if(layEvent === &#39;detail&#39;){
     viewLableInfo(data.attrId);
     layer.msg(data.attrId);
    } else if(layEvent === &#39;del&#39;){
     layer.msg(&#39;删除&#39;);
    } else if(layEvent === &#39;edit&#39;){
     layer.msg(&#39;编辑操作&#39;);
    }
   });
   //常规用法
   laydate.render({
    elem: &#39;#createDate&#39;
   });
   //常规用法
   laydate.render({
    elem: &#39;#processingTime&#39;
   });
 
  });
 }
  var pId = &#39;${pGBean.pgId }&#39;;
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은 총 합계를 계산할 때 이렇게 작성할 수 있습니다

COUNT(*) OVER(PARTITION BY 1) AS TOTAL
로그인 후 복사

관련 추천: layui 튜토리얼

위 내용은 Layui가 데이터 페이징 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:码农教程
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿