layui实现数据分页功能(ajax异步)

　　

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

　　

<强>一、引入layUI的相关资源

　　 　　 　　& lt;链接rel="样式表" href=" https://www.yisu.com/zixun/$ {ctxPath}/供应商/layui-v2.4.5 layui/css/layui.css”比; 　　& lt;脚本src=" https://www.yisu.com/zixun/$ {ctxPath}/供应商/layui-v2.4.5/layui/layui.js”祝辞& lt;/script> 　　& lt;脚本src=" https://www.yisu.com/zixun/$ {ctxPath}/供应商/jquery.min.js”祝辞& lt;/script>//引入jquery包 　　 　　

<强>二、html页面代码

　　 　　 　　& lt; div class=" layui-main g主要“比; 　　& lt; div类=發ayui-row”比; 　　& lt; div类=發ayui-col-xs12”比; 　　& lt;引用类=發ayui-elem-quote”比; 　　当前系统排名:& lt;跨类=發ayui-badge-rim出示警徽”在第{scoreRecordUtil.rank}名& lt;美元/span> 　　总积分:& lt;跨类=" layui-badge-rim出示警徽”在$ {scoreRecordUtil.totalScore}分& lt;/span> 　　和上一名相差:& lt;跨类=發ayui-badge-rim出示警徽”在$ {scoreRecordUtil.differenceTotal}分& lt;/span>,继续加油! 　　& lt;/blockquote> 　　& lt;表类=發ayui-table”比; 　　& lt; thead> 　　& lt; tr> 　　& lt; th>积分类型& lt;/th> 　　& lt; th>积分原因& lt;/th> 　　& lt; th>积分值& lt;/th> 　　& lt; th>创建时间& lt;/th> 　　& lt;/tr> 　　& lt;/thead> 　　 　　& lt; tbody>//存放分页加载数据 　　& lt;/tbody> 　　 　　& lt;/table> 　　& lt; div类="页面"祝辞& lt;/div> 　　& lt;/div> 　　& lt;/div> 　　& lt;/div> 　　 　　

<强>三,定义showReocrd()函数异步加载数据

　　 　　 　　函数showReocrd (pageNo pageSize) { 　　$ . get (" $ {ctxPath}/score-record/并”, 　　{ 　　pageNo: pageNo, 　　页大小:页大小 　　}, 　　函数(日期){//加载后台返回的列表集合数据 　　(var=0;我& lt;date.length;我+ +){ 　　 　　道明=$ var (“& lt; td> & lt;/td>”)。text(日期[我].typeName); 　　var td2=$ (“& lt; td> & lt;/td>”)。text(日期[我].operate); 　　var td3=$ (“& lt; td> & lt;/td>”)。text(日期[我].score); 　　var td4=$ (“& lt; td> & lt;/td>”)。text(日期[我].createTime); 　　var tr=$ (“& lt; tr> & lt;/tr>”)。追加(td、td2 td3 td4); 　　$(身体).append (tr); 　　} 　　}, 　　“json” 　　)； 　　} 　　之前 　　 　　

<强>四,分页js

　　

主要注意下:

　　
　　

数:总代表总的数据量,

　　

限制代表每页行数,

　　

咕咕叫代表起始页,但跳函数中的obj.curr取的是当前页数

　　

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

　　

第一次为是否首次加载

　　 　　 　　//加载总页数 　　总额var=" $ {scoreRecordUtil.totalRecord}”;//先初始化加载首页,十条数据 　　showReocrd (10); 　　 　　layui。使用((“laypage”、“jquery”),函数(){ 　　 　　var laypage=layui。laypage=layui。美元; 　　$ (" .page ") . each(函数(我){ 　　laypage.render ({ 　　elem://注意,这里的test1是ID,不用加#号 　　,数://数据总数,从服务端得到 　　限制:10//每页显示条数 　　,限制(10年,20年,30): 　　科尔:1//起始页 　　组:5//连续页码个数 　　上一页:“上一页“//上一页文本 　　netx:“下一页“//下一页文本 　　首先:1//首页文本 　　最后:100//尾页文本 　　、布局:[“上一页”,“页面”,“下一个”,“限制”,“刷新”,“跳过”)//跳转页码时调用 　　跳:函数(obj,首先){//obj为当前页的属性和方法,第一次加载第一个为真//非首次加载做点什么 　　如果(!){//清空以前加载的数据 　　$(身体)空虚();//调用加载函数加载数据 　　showReocrd (obj.curr obj.limit); 　　} 　　} 　　}); 　　}) 　　}) 　　 　　

推荐:使用layui的表组件自带分页功能(异步,含条件查询)点这里

　　

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

layui实现数据分页功能(ajax异步)