好资源导航 » 文章资讯 » layui实现数据分页功能（ajax异步）

layui实现数据分页功能（ajax异步）

2023-08-18 13:24:04 212

最近项目要使用layUI的分页，看了官方demo感觉还是不太清晰，摸索了一下，现在记录一下。

一、引入layUI的相关资源



//引入jquery包

二、html页面代码





当前系统排名：第${scoreRecordUtil.rank}名，
总积分：${scoreRecordUtil.totalScore}分，
和上一名相差：${scoreRecordUtil.differenceTotal}分，继续加油！




积分类型
积分原因
积分值
创建时间




//存放分页加载数据

三、定义showReocrd()函数异步加载数据

functionshowReocrd(pageNo,pageSize){
$.get("${ctxPath}/score-record/showRecord",
{
pageNo:pageNo,
pageSize:pageSize
},
function(date){
//加载后台返回的List集合数据
for(vari=0;i").text(date[i].typeName);
vartd2=$("").text(date[i].operate);
vartd3=$("").text(date[i].score);
vartd4=$("").text(date[i].createTime);
vartr=$("").append(td,td2,td3,td4);
$('tbody').append(tr);
}
},
"json"
);
}

四、分页js

主要注意下:

count:total代表总的数据量，

limit代表每页行数，

curr代表起始页，但jump函数中的obj.curr取的是当前页数

jump方法中obj参数可以取到上面的属性和方法

first为是否首次加载

//加载总页数
vartotal="${scoreRecordUtil.totalRecord}";
//先初始化加载首页，十条数据
showReocrd(1,10);

layui.use(['laypage','jquery'],function(){

varlaypage=layui.laypage,$=layui.$;
$(".page").each(function(i,the){
laypage.render({
elem:the//注意，这里的test1是ID，不用加#号
,count:total//数据总数，从服务端得到
,limit:10//每页显示条数
,limits:[10,20,30]
,curr:1//起始页
,groups:5//连续页码个数
,prev:'上一页'//上一页文本
,netx:'下一页'//下一页文本
,first:1//首页文本
,last:100//尾页文本
,layout:['prev','page','next','limit','refresh','skip']
//跳转页码时调用
,jump:function(obj,first){//obj为当前页的属性和方法，第一次加载first为true
//非首次加载dosomething
if(!first){
//清空以前加载的数据
$('tbody').empty();
//调用加载函数加载数据
showReocrd(obj.curr,obj.limit);
}
}
});
})
})

推荐：使用layui的table组件自带分页功能（异步，含条件查询）点这里

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

layui实现数据分页功能（ajax异步）

热门推荐

随机推荐