layui实现数据分页功能（ajax异步）_layuiajax - CSDN文库

115 浏览量更新于2023-03-16 评论 1 收藏 42KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

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 代表每页行数，

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论0

weixin_38514526

粉丝: 7
资源: 930

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈