layui如何实现数据分页功能


本文摘自PHP中文网,作者V,侵删。

我们先来看下官网的演示画面。

具体代码:

页面引入layui.css、 layui.js

1

2

3

4

5

<div id="pTable" style="width: 1200px;">

  <table class="layui-table" id="layui_table_id" lay-filter="test">

  </table>

<div id="laypage"></div>

 </div>

前台js

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

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);

业务逻辑层

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

@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时可以这么写

1

COUNT(*) OVER(PARTITION BY 1) AS TOTAL

相关推荐:layui教程

以上就是layui如何实现数据分页功能的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

layui怎么表格中显示图片

layui icon是什么

layui怎么做图片在列表中显示

layui框架的table字段筛选功能介绍

layui中使用的一些弹出框

layui中进度条渲染介绍

layui实现input输入和选择的方法

layui第三方插件开发规范详解

layui怎么加图标

layui如何使用jquery

更多相关阅读请进入《layui》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...