layui实现数据分页功能

冷不防 2022-06-04 02:46 364阅读 0赞

官网layui table演示页面：[http://www.layui.com/demo/table.html][http_www.layui.com_demo_table.html]

示例截图：

![Center][]

页面引入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

[http_www.layui.com_demo_table.html]: http://www.layui.com/demo/table.html
[Center]: /images/20220604/19c326428b90487baf370a0df7223117.png

发表评论取消回复

表情：

评论列表（有 0 条评论，364人围观）

还没有评论，来说两句吧...

相关阅读

相关 tp5+layui实现分页

layui和thinkphp5自己在百度上下载 html代码 <!DOCTYPE html> <html> <head> <meta c

青旅半醒/ 2023年03月01日 11:47/ 0 赞/ 192 阅读

相关 layui 分页

//分页 layui.laypage.render({ elem : 'pageInfo', count : ${ query.rs

忘是亡心i/ 2023年02月09日 14:11/ 0 赞/ 32 阅读

相关 layui数据表格分页简单实现

首先要了解layui分页和一般的后台分页不一样。至少：我用的layui是基于前台分页的。后台分页，都是根据前台传递了pageNum和limit这些分页参送给后台，后

今天药忘吃喽~/ 2022年12月19日 13:08/ 0 赞/ 237 阅读

相关 layui实现数据分页功能

官网layui table演示页面：[http://www.layui.com/demo/table.html][http_www.layui.com_demo_table.h

小灰灰/ 2022年06月05日 06:53/ 0 赞/ 313 阅读

相关 layui实现数据分页功能

官网layui table演示页面：[http://www.layui.com/demo/table.html][http_www.layui.com_demo_table.h

冷不防/ 2022年06月04日 02:46/ 0 赞/ 365 阅读

相关 layui的数据表格+springmvc实现数据显示，分页功能

在做分享圈项目后台时，用的是layui提供的后端页面框架，页面挺好看的。下载layui包：组装我们想要的页面，[layui在线示例 ][layui_ _ _

分手后的思念是犯贱/ 2022年05月24日 03:35/ 0 赞/ 360 阅读

相关 layui分页

<div id="demo1"></div> js: var pageVal = 1;//第几页 var c

向右看齐/ 2022年01月10日 12:21/ 0 赞/ 441 阅读

相关 layui表格+pagehelper实现分页

在layui表格中增加属性page:true layui默认会传回两个参数，一个是limit,另一个是page; 其中limit是每页的条数，page是标识第几页然后我

╰+攻爆jí腚メ/ 2022年01月06日 00:11/ 0 赞/ 588 阅读

相关 LayUI数据表格和分页的实现

1、简单表格样式没有分页，没有crud操作 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_1

小咪咪/ 2021年12月14日 04:37/ 0 赞/ 1013 阅读

相关 layui实现分页（前后端）

1.前端html代码： <!DOCTYPE html> <html lang="en"> <head> <meta name="a

你的名字/ 2021年05月10日 11:33/ 0 赞/ 680 阅读