本文为大家介绍layui的分页使用教程,步骤详细,欢迎学习。
官网地址:https://www.layui.com/doc/modules/laypage.html
laypage 的使用非常简单,指向一个用于存放分页的容器,通过服务端得到一些初始值,即可完成分页渲染:
一、导入相关JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/layui.js"></script>

二、选择容器

<div id="test1"></div>   

三、初始化分页

layui.use('laypage', function(){
        $.ajax({
            type:"POST",
            url:"",
            dataType:"json",
            data:{},
            success:function (data) {
                //执行一个laypage实例
                laypage.render({
                    elem: 'test1' //注意,这里的 test1 是 ID,不用加 # 号
                    ,count: data.totalRow //数据总数,从服务端得到
                    ,limit:4 //每页条数
                    ,prev:"🔼"
                    ,next:"🔽"
                    ,theme: '#FF5722'
                    ,layout: ['count', 'prev', 'page', 'next']
                    ,jump: function(obj, first){
                        //obj包含了当前分页的所有参数,比如:
                        //  console.log(obj.curr); //得到当前页,以便向服务端请求对应页的数据。
                        //  console.log(obj.limit); //得到每页显示的条数
                        $.ajax({
                            type:"POST",
                            url:"",
                            dataType:"json",
                            data:{"courseId":courseId,page:obj.curr,pageSize: 4},
                            success:function (data) {
                                var dataList = data.list;
                                for (var i = 0; i < dataList.length; i++) {
                                    classRoomName = dataList[i].name;
                                    playSource = dataList[i].device_preview_rtmp; 
                                }
                            }
                        })
                    }
                });
            }
        });
});

注:以上就是结合ajax完成layui的分页教程,非常简单,其他分页样式及参数介绍在官网中有很详细的介绍可以去学习。

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐