layui的laypage分页插件使用

野性酷女 2022-05-19 01:06 431阅读 0赞

window.onload= function () {
    
            loadData()  //请求数据
            getPage()     //分页操作
        }
        var page=1; //设置首页页码
        var limit=2;  //设置一页显示的条数
        var total;    //总条数
    
    
        function loadData(){
            $.ajax({
                type:"post",
                url:"/it/orderManage/getOrderList",//对应controller的URL
                async:false,
                dataType: 'json',
                data:{
                    "pageIndex":page,
                    "pageSize":limit,
                },
                success:function(ret){
                    total=ret.total;  //设置总条数
                    console.log(ret);
                    var data1=ret.rows;
                    var html='';
                    for(var i=0;i<data1.length;i++){
                        html+='<dl>';
                        html+=' <dt>';
                        html+='     <span class="s1">'+data1[i].CREATE_TIME+'</span>';
                        html+='     <span class="s2">'+data1[i].STAGE_NAME+'</span>';
                        html+=' </dt>';
                        html+=' <dd class="d1">';
                        html+='     价格：<span>￥'+data1[i].REWARD_FEE+'</span>';
                        html+=' </dd>';
                        html+=' <dd class="d1">';
                        html+='     名称：<span>'+data1[i].ORDER_NAME+'</span>';
                        html+=' </dd>';
                        html+=' <dd class="d1">';
                        html+='     人数：<span>'+data1[i].TAKE_NUM+'人参与</span>';
                        html+=' </dd>';
                        html+=' <dd class="d1">';
                        html+='     时间：<span>'+data1[i].START_DATE+'点 -- '+data1[i].END_DATE+'点</span>';
                        html+=' </dd>';
                        html+='</dl>';
    
                    }
                    console.log(html)
                    $(".orderList").empty().append(html);
    
                }
            });
        }
    
    
        function getPage(){
            layui.use('laypage', function(){
                var laypage = layui.laypage;
    
                //执行一个laypage实例
                laypage.render({
                    elem: 'laypage' //注意，这里的 test1 是 ID，不用加 # 号
                    ,count: total, //数据总数，从服务端得到
                    limit:limit,   //每页条数设置
                    jump: function(obj, first){
                        //obj包含了当前分页的所有参数，比如：
                        console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                        console.log(obj.limit); //得到每页显示的条数
                        page=obj.curr;  //改变当前页码
                        limit=obj.limit;
                        //首次不执行
                        if(!first){
                            loadData()  //加载数据
                        }
                    }
                });
            });
        }

以上是前台js，后台配合对应的分页插件就可以实现分页效果了。我用的是mybatis的pageHelper

发表评论取消回复

表情：

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

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

相关阅读

相关分页插件的使用

分页插件的使用 1.分页插件的配置步骤 1.1添加依赖 <dependency> <groupId>com.github.pagehelper

电玩女神/ 2024年04月07日 14:06/ 0 赞/ 103 阅读

相关 bootstrap分页插件php,bootstrap-paginator分页插件实现分页的使用

![Ft9POsdcpvTbOLP6ICggh6zlEoUc][] 1.在页面引入bootstrap-paginator.js jquery必须要1.8版本以上。 2.写

骑猪看日落/ 2023年01月16日 06:51/ 0 赞/ 192 阅读

相关 mybatis的分页插件使用

现在实现简单的分页查询没有以前手写代码那么复杂了，以前写分页查询，我们需要设置好多的属性，并且还需要计算才能得出我们想要的页面数据，而现在我们只需要引入一个插件就可以了，实现m

向右看齐/ 2022年11月26日 08:53/ 0 赞/ 300 阅读

相关使用Laypage进行分页

使用Laypage进行分页 Laypage是一款简单，方便的分页插件，无需写过多的js代码只需要向后台传入当前页数（由于本人偷懒在JS中写死了pageSize）

女爷i/ 2022年06月12日 05:21/ 0 赞/ 263 阅读

相关 layui2.0使用table+laypage实现真分页

前言：最近项目上使用layui做前端页面，发现layui的table本身的分页不能根据屏幕生成每页行数，所以研究了下文档，更改分页简单解释： 1.最开始是根据屏幕计算

港控/mmm°/ 2022年05月21日 04:27/ 0 赞/ 247 阅读

相关 layui的laypage分页插件使用

window.onload= function () { loadData() //请求数据 getPage

野性酷女/ 2022年05月19日 01:06/ 0 赞/ 432 阅读

相关 AngularJS分页插件的使用

最终效果： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9n

素颜马尾好姑娘i/ 2022年04月17日 05:17/ 0 赞/ 437 阅读

相关使用django的分页插件进行分页

实现的功能： 1.查询所有的数据 2.将数据传入分页的函数 3.调用具体页的数据视图文件： from django.core.paginat

雨点打透心脏的1/2处/ 2022年02月22日 04:05/ 0 赞/ 399 阅读

相关 Layui框架中，分页插件的使用

一般我们通过layui框架的分页插件可以对查询的数据进行分页 function getUserList(pageIndex) { if

亦凉/ 2021年12月08日 22:05/ 0 赞/ 654 阅读

相关 layui中laypage当前页刷新

$(".layui-laypage-btn").click(); 注：[https://www.cnblogs.com/mengjianzhou/p/8532576.

- 日理万妓/ 2021年09月23日 09:42/ 0 赞/ 469 阅读