结合ajax完成layui的分页

本文为大家介绍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的分页教程，非常简单，其他分页样式及参数介绍在官网中有很详细的介绍可以去学习。