layui分页插件的使用及代码实现

最新推荐文章于 2023-10-09 18:40:50 发布

逐梦s

最新推荐文章于 2023-10-09 18:40:50 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： java layui 文章标签：分页

sdream

本文链接：https://blog.youkuaiyun.com/qq_28449663/article/details/80180035

本文介绍了如何使用 layui 分页插件实现数据分页功能。通过 AJAX 获取数据总数，结合 layui.laypage 实例配置分页参数，展示每页5条数据。同时，提供了动态跳转分页和数据加载的示例代码，详细展示了分页插件在实际项目中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$.post("/jzfw/apply/count", function(_data) {
//正常加载信息
if (_data.errorCode == 200) {
datasum = _data.data;

layui.use('laypage', function() {

var laypage = layui.laypage;
//执行一个laypage实例
laypage.render({
elem : 'test1' //注意，这里的 test1 是 ID，不用加 # 号
,limit : 5 //每页数据量
,count : datasum //数据总数，从服务端得到
// ,groups : 3
,jump : function(obj, first) {
//obj包含了当前分页的所有参数，比如：
// alert(obj.curr);
// alert(obj.limit);
applylist(obj.curr,obj.limit);
//首次不执行
if (!first) {
//do something
}
}
});
});

}
});

function applylist(pageIndex,pageSize) {
$
.ajax({
type : 'POST',
url : 'http://localhost:8082/jzfw/apply/list',
async : true,
contentType : 'application/json;charset=utf-8',
data : JSON.stringify({
"pageSize" : pageSize,
"pageIndex" : pageIndex,
}),
d