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 解析多维的Json数据格式
Nov 02 Javascript
8个超实用的jQuery功能代码分享
Jan 08 Javascript
jQuery实现点击小图显示大图代码分享
Aug 25 Javascript
Bootstrap 实现查询的完美方法
Oct 26 Javascript
BootStrap树状图显示功能
Nov 24 Javascript
jquery实现页面加载效果
Feb 21 Javascript
浅谈关于axios和session的一些事
Jul 13 Javascript
VUE前端cookie简单操作
Oct 17 Javascript
vue组件父子间通信详解(三)
Nov 07 Javascript
基于vue-cli 打包时抽离项目相关配置文件详解
Mar 07 Javascript
浅谈vue 多个变量同时赋相同值互相影响
Aug 05 Javascript
js+canvas实现画板功能
Sep 13 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
Win2003下APACHE+PHP5+MYSQL4+PHPMYADMIN 的简易安装配置
2006/11/18 PHP
利用php绘制饼状图的实现代码
2013/06/07 PHP
PHP判断远程图片是否存在的几种方法
2014/05/04 PHP
写一段简单的PHP建立文件夹代码
2015/01/06 PHP
ThinkPHP函数详解之M方法和R方法
2015/09/10 PHP
kindeditor 加入七牛云上传的实例讲解
2017/11/12 PHP
PHP微信企业号开发之回调模式开启与用法示例
2017/11/25 PHP
javascript 面向对象,实现namespace,class,继承,重载
2009/10/29 Javascript
jquery 圆形旋转图片滚动切换效果
2011/01/19 Javascript
JS鼠标事件大全 推荐收藏
2011/11/01 Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
2013/04/12 Javascript
JQuery的$和其它JS发生冲突的快速解决方法
2014/01/24 Javascript
AngularJS中的包含详细介绍及实现示例
2016/07/28 Javascript
layer实现弹窗提交信息
2016/12/12 Javascript
Vue-Router的使用方法
2018/09/05 Javascript
微信小程序-form表单提交代码实例
2019/04/29 Javascript
在JavaScript中如何访问暂未存在的嵌套对象
2019/06/18 Javascript
javascript实现fetch请求返回的统一拦截
2019/12/22 Javascript
再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿
2020/12/09 Javascript
python MySQLdb Windows下安装教程及问题解决方法
2015/05/09 Python
Python捕捉和模拟鼠标事件的方法
2015/06/03 Python
详解Python函数作用域的LEGB顺序
2016/05/14 Python
Python 记录日志的灵活性和可配置性介绍
2018/02/27 Python
python遍历文件夹找出文件夹后缀为py的文件方法
2018/10/21 Python
pytorch 在sequential中使用view来reshape的例子
2019/08/20 Python
大码女装:Ulla Popken
2019/08/06 全球购物
策划助理岗位职责
2013/11/18 职场文书
医大实习自我鉴定
2013/12/07 职场文书
广告传媒专业应届生求职信
2014/03/01 职场文书
幼儿园新年寄语
2014/04/03 职场文书
学雷锋树新风演讲稿
2014/05/10 职场文书
房屋鉴定委托书范本
2014/09/23 职场文书
我们的节日元宵节活动总结
2015/02/06 职场文书
司法廉洁教育心得体会
2016/01/20 职场文书
Python中Cookies导出某站用户数据的方法
2021/05/17 Python
python3操作redis实现List列表实例
2021/08/04 Python