layui实现数据分页功能（ajax异步）
156 浏览量
2020-12-08
23:16:04
上传
评论 1
收藏 42KB PDF 举报
layui实现数据分页功能（实现数据分页功能（ajax异步）异步）
最近项目要使用layUI的分页，看了官方demo感觉还是不太清晰，摸索了一下，现在记录一下。
一、引入一、引入layUI的相关资源的相关资源
<link rel="stylesheet" href="${ctxPath}/vendor/layui-v2.4.5/layui/css/layui.css" >
<script src="${ctxPath}/vendor/layui-v2.4.5/layui/layui.js"></script>
<script src="${ctxPath}/vendor/jquery.min.js"></script>//引入jquery包
二、二、html页面代码页面代码
<div class="layui-main g-main">
<div class="layui-row">
<div class="layui-col-xs12">
<blockquote class="layui-elem-quote">
当前系统排名：<span class="layui-badge-rim badge-number">第${scoreRecordUtil.rank}名</span>，
总积分：<span class="layui-badge-rim badge-number">${scoreRecordUtil.totalScore}分</span>，
和上一名相差：<span class="layui-badge-rim badge-number">${scoreRecordUtil.differenceTotal}分</span>，继续加油！
</blockquote>
<table class="layui-table">
<thead>
<tr>
<th>积分类型</th>
<th>积分原因</th>
<th>积分值</th>
<th>创建时间</th>
</tr>
</thead>
<tbody>
//存放分页加载数据
</tbody>
</table>
<div class="page"></div>
</div>
</div>
</div>
三、定义三、定义showReocrd()函数异步加载数据函数异步加载数据
function showReocrd(pageNo,pageSize){
$.get("${ctxPath}/score-record/showRecord",
{
pageNo:pageNo,
pageSize:pageSize
},
function (date) {
//加载后台返回的List集合数据
for (var i = 0; i < date.length; i++) {
var td = $("<td></td>").text(date[i].typeName);
var td2 = $("<td></td>").text(date[i].operate);
var td3 = $("<td></td>").text(date[i].score);
var td4 = $("<td></td>").text(date[i].createTime);
var tr = $("<tr></tr>").append(td, td2, td3, td4);
$('tbody').append(tr);
}
},
"json"
);
}
四、分页四、分页js
主要注意下:
count: total 代表总的数据量，
limit 代表每页行数，
评论0