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


Posted in Javascript onJuly 27, 2019

最近项目要使用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 代表每页行数,

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

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

first 为是否首次加载

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

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

 var laypage = 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
    //非首次加载 do something
    if (!first) {
     //清空以前加载的数据
     $('tbody').empty();
     //调用加载函数加载数据
     showReocrd(obj.curr,obj.limit);
    }
   }
  });
 })
})

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

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

Javascript 相关文章推荐
jQuery学习4 浏览器的事件模型
Feb 07 Javascript
Javascript执行效率全面总结
Nov 04 Javascript
js生成动态表格并为每个单元格添加单击事件的方法
Apr 14 Javascript
jQuery验证元素是否为空的两种常用方法
Mar 17 Javascript
js判断当前页面在移动设备还是在PC端中打开
Jan 06 Javascript
Bootstrap Table使用整理(一)
Jun 09 Javascript
浅谈箭头函数写法在ReactJs中的使用
Aug 22 Javascript
解决vue点击控制单个样式的问题
Sep 05 Javascript
Electron vue的使用教程图文详解
Jul 05 Javascript
ElementUI radio组件选中小改造
Aug 12 Javascript
在SSM框架下用laypage和ajax实现分页和数据交互的方法
Sep 27 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
Apr 25 Javascript
layui实现数据表格table分页功能(ajax异步)
Jul 27 #Javascript
layui实现数据分页功能
Jul 27 #Javascript
layUI实现列表查询功能
Jul 27 #Javascript
Layui实现带查询条件的分页
Jul 27 #Javascript
layui数据表格实现重载数据表格功能(搜索功能)
Jul 27 #Javascript
layui表格数据重载
Jul 27 #Javascript
基于layui实现高级搜索(筛选)功能
Jul 26 #Javascript
You might like
可定制的PHP缩略图生成程式(需要GD库支持)
2007/03/06 PHP
基于PHP实现的事件机制实例分析
2015/06/18 PHP
Symfony2开发之控制器用法实例分析
2016/02/05 PHP
基于jquery的气泡提示效果
2010/05/31 Javascript
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
2013/06/29 Javascript
浅谈nodeName,nodeValue,nodeType,typeof 的区别
2015/01/13 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
2015/08/26 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
2015/12/04 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
2016/08/23 Javascript
js实现增加数字显示的环形进度条效果
2017/02/05 Javascript
Vue.js项目部署到服务器的详细步骤
2017/07/17 Javascript
原生JS封装animate运动框架的实例
2017/10/12 Javascript
微信小程序实现红包雨功能
2018/07/11 Javascript
ES6 fetch函数与后台交互实现
2018/11/14 Javascript
详解vue中axios请求的封装
2019/04/08 Javascript
关于js陀螺仪的理解分析
2019/04/11 Javascript
javascript获取元素的计算样式
2019/05/24 Javascript
vue中$refs, $emit, $on, $once, $off的使用详解
2019/05/26 Javascript
解决layer.msg 不居中 ifram中的问题
2019/09/05 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
2019/09/21 Javascript
如何利用JS将手机号中间四位变成*号
2020/09/29 Javascript
[02:23]2016国际邀请赛中国区预选赛wings晋级之路
2016/06/29 DOTA
在python中实现将一张图片剪切成四份的方法
2018/12/05 Python
python ipset管理 增删白名单的方法
2019/01/14 Python
解决python给列表里添加字典时被最后一个覆盖的问题
2019/01/21 Python
浅谈Pytorch中的torch.gather函数的含义
2019/08/18 Python
c语言常见笔试题总结
2016/09/05 面试题
Oracle里面常用的数据字典有哪些
2014/02/14 面试题
请解释接口的显式实现有什么意义
2012/05/26 面试题
Prototype中如何为一个元素添加一个方法
2014/12/08 面试题
测绘工程个人的自我评价
2013/11/23 职场文书
语文教育专业推荐信范文
2013/11/25 职场文书
俄罗斯商务邀请函
2014/01/26 职场文书
Flask搭建一个API服务器的步骤
2021/05/28 Python
python之np.argmax()及对axis=0或者1的理解
2021/06/02 Python
Javascript 解构赋值详情
2021/11/17 Javascript