layui的分页功能是很不错的，方便快捷。jquery普通页面开发可以考虑。下面以表格为例，举例layui分页功能。其他（利于list等）同理。首先将layui.css、layui.all.js引入在页面中。
官网（下载地址）：https://www.layui.com/
1.html页面
<table class="layui-table" lay-even="" lay-skin="row"> <thead> <tr> <th>登录名</th> <th>用户组</th> <th>姓名/昵称</th> <th>创建日期</th> <th>操作</th> </tr> </thead> <tbody> </tbody> </table> <div id="demo1"></div> //调用分页的html代码
2.初始化数据每页显示的条数，当前页数（如果想要搜索等功能，也可以初始化搜索内容的字段 var searchVal=''）
var totalData=0 //表格数据总数 var currentPage=1 //当前页数 var pageLimit=10 //每页显示数据条数 handleData(currentPage,pageLimit,searchVal) //刚进页面初始化表格 topage() //分页
3.封装页面渲染的ajax请求，注意调用的时候参数的顺序问题。3,4步可以合并，看自己的风格。
function handleData(data1,data2){ $.ajax({ type:"get", url:window.baseUrl+'/backend/users/', data:{page:data1, pageSize:data2}, success:function(data){ // console.log(data) dataList=data.data.users renderData(dataList) } }) }
4.封装渲染表格的方法
function renderData(data){ //渲染表格数据，获取datalist $("tbody").html('') //以下是根据自己的需求将数据添加到页面中的方法 for(var i=0;i<data.length;i++){ //此处可以用foreach函数代替，更为简洁 $("tbody").append(`<tr> <td>${data[i].name}</td> <td>${data[i].group_str}</td> <td>${data[i].nickname}</td> <td>${data[i].created}</td> <td> <button data-id="${data[i].id}" class="btn layui-btn-normal btn-xs checkout" data-toggle="modal" data-target="#myModal1">查看</button> <button data-id="${data[i].id}" class="btn layui-btn-normal btn-xs update" data-toggle="modal" data-target="#myModal2">编辑</button> <button data-id="${data[i].id}" class="btn btn-danger btn-xs delete">删除</button> </td> </tr>`) //按钮的data-id是为了获取当前行的id，定位此行，封装方法进行操作 } }
4.分页功能
function topage(){ //分页操作 $.ajax({ //获取数据总数 type:"get", url:window.baseUrl+'/backend/users/', data:{page:currentPage, pageSize:pageLimit}, success:function(data){ totalData=data.data.total layui.use(['element','laypage', 'layer'], function(){ var $ = layui.jquery; var element = layui.element; var laypage = layui.laypage ,layer = layui.layer; //总页数大于页码总数 laypage.render({ elem: 'demo1' ,count: totalData //数据总数 ,limit:pageLimit ,jump: function(obj,first){ //obj包含了当前分页的所有参数，比如： var curr=obj.curr var limit=obj.limit // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。 // console.log(obj.limit); //得到每页显示的条数 if(!first){ handleData(curr,limit) } } }); }) } }) }
5.举例操作按钮的实现，其他功能同理
$("table").on("click",'.delete',function(){ //删除按钮 dataId=$(this).attr("data-id") console.log(dataId) layer.open({ content: '确定要删除吗' ,btn: ['取消', '确定'] ,yes: function(index, layero){ layer.close(index) } ,btn2: function(index, layero){ $.ajax({ type:"get", data:{user_id:dataId}, url:window.baseUrl+'/backend/user/deletes/', success:function(data){ console.log(data) $("button[data-id='"+dataId+"']").parents('td').parents('tr').remove() handleData(currentPage,pageLimit) topage() } }) } }); })
