layui服务器端分页实例

2023-05-07 05:58| 来源: 网络整理| 查看: 265

layui的分页功能是很不错的，方便快捷。jquery普通页面开发可以考虑。下面以表格为例，举例layui分页功能。其他（利于list等）同理。首先将layui.css、layui.all.js引入在页面中。

官网（下载地址）：https://www.layui.com/

1.html页面

登录名用户组姓名/昵称创建日期操作

//调用分页的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-id是为了获取当前行的id，定位此行，封装方法进行操作 }}

4.分页功能

} })

}

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() } }) }

});

})

【本文地址】

公司简介

联系我们