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 validation验证身份证号,护照,电话号码,email(实例代码)
Nov 06 Javascript
解析jquery中的ajax缓存问题
Dec 19 Javascript
jquery $.trim()方法使用介绍
May 21 Javascript
BootStrap扔进Django里的方法详解
May 13 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
Dec 01 Javascript
移动端web滚动分页的实现方法
May 05 Javascript
基于JavaScript实现数码时钟效果
Mar 30 Javascript
seajs中最常用的7个功能、配置示例
Oct 10 Javascript
Vue项目中跨域问题解决方案
Jun 05 Javascript
JS高级技巧(简洁版)
Jul 29 Javascript
vue设置动态请求地址的例子
Nov 01 Javascript
Vue实现点击当前行变色
Dec 14 Vue.js
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下使用SMTP发邮件的代码
2008/01/10 PHP
PHP 类型转换函数intval
2009/06/20 PHP
PHP的异常处理类Exception的使用及说明
2012/06/13 PHP
zend optimizer在wamp的基础上安装图文教程
2013/10/26 PHP
PHP与SQL语句常用大全
2016/12/10 PHP
Yii框架where查询用法实例分析
2019/10/22 PHP
PHPUnit + Laravel单元测试常用技能
2019/11/06 PHP
PJBlog插件 防刷新的在线播放器
2006/10/25 Javascript
jQuery ajax cache缓存问题
2010/07/01 Javascript
基于jquery的实现简单的表格中增加或删除下一行
2010/08/01 Javascript
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
2012/12/12 Javascript
JS来动态的修改url实现对url的增删查改
2014/09/05 Javascript
jQuery中:nth-child选择器用法实例
2014/12/31 Javascript
JavaScript实现的背景自动变色代码
2015/10/17 Javascript
用jQuery实现优酷首页轮播图
2017/01/09 Javascript
Node.js使用NodeMailer发送邮件实例代码
2017/03/06 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
2020/10/15 Javascript
vue图片裁剪插件vue-cropper使用方法详解
2020/12/16 Vue.js
Python Web框架Flask下网站开发入门实例
2015/02/08 Python
Python对List中的元素排序的方法
2018/04/01 Python
查看Django和flask版本的方法
2018/05/14 Python
Python logging模块用法示例
2018/08/28 Python
Python 元组操作总结
2019/09/18 Python
python字典排序的方法
2019/10/12 Python
使用Jupyter notebooks上传文件夹或大量数据到服务器
2020/04/14 Python
python中re模块知识点总结
2021/01/17 Python
美国面料纺织品商城:Fabric.com
2017/06/28 全球购物
TCP协议通讯的过程和步骤是什么
2015/10/18 面试题
客户代表自我评价范例
2013/09/24 职场文书
污水厂厂长岗位职责
2014/01/04 职场文书
关于环保的建议书400字
2014/03/12 职场文书
优秀学生干部个人事迹材料
2014/06/02 职场文书
2015年信息中心工作总结
2015/05/25 职场文书
k-means & DBSCAN 总结
2021/04/27 Python
MySQL创建管理子分区
2022/04/13 MySQL
Redis 限流器
2022/05/15 Redis