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 相关文章推荐
Javascript创建自定义对象 创建Object实例添加属性和方法
Jun 04 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
Jul 10 Javascript
php和js对数据库图片进行等比缩放示例
Apr 28 Javascript
javascript实现验证身份证号的有效性并提示
Apr 30 Javascript
轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)
Nov 30 Javascript
Webpack打包字体font-awesome的方法示例
Apr 26 Javascript
浅谈Vue CLI 3结合Lerna进行UI框架设计
Apr 14 Javascript
微信小程序合法域名配置方法
May 06 Javascript
解决layui的input独占一行的问题
Sep 10 Javascript
React中Ref 的使用方法详解
Apr 28 Javascript
vue使用swiper实现左右滑动切换图片
Oct 16 Javascript
vue的项目如何打包上线
Apr 13 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的类 功能齐全的发送邮件类
2006/10/09 PHP
如何在WIN2K下安装PHP4.04
2006/10/09 PHP
windows下PHP APACHE MYSQ完整配置
2007/01/02 PHP
用sql命令修改数据表中的一个字段为非空(not null)的语句
2010/06/04 PHP
php实现批量下载百度云盘文件例子分享
2014/04/10 PHP
跟我学Laravel之视图 &amp; Response
2014/10/15 PHP
yii插入数据库防并发的简单代码
2017/05/27 PHP
js 覆盖和重载 函数
2009/09/25 Javascript
jQuery EasyUI API 中文文档 - ComboGrid 组合表格
2011/10/13 Javascript
Javascript中获取对象的原型对象的方法小结
2015/02/25 Javascript
CSS图片响应式 垂直水平居中
2015/08/14 Javascript
基于jQuery实现文本框只能输入数字(小数、整数)
2016/01/14 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
2018/01/31 Javascript
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
2018/05/03 Javascript
浅谈ElementUI中switch回调函数change的参数问题
2018/08/24 Javascript
浅谈Fetch 数据交互方式
2018/12/20 Javascript
小程序根据手机机型设置自定义底部导航距离
2019/06/04 Javascript
vue祖孙组件之间的数据传递案例
2020/12/07 Vue.js
解决vue项目本地启动时无法携带cookie的问题
2021/02/06 Vue.js
scrapy自定义pipeline类实现将采集数据保存到mongodb的方法
2015/04/16 Python
Tensorflow环境搭建的方法步骤
2018/02/07 Python
python 统计列表中不同元素的数量方法
2018/06/29 Python
使用Template格式化Python字符串的方法
2019/01/22 Python
使用python绘制温度变化雷达图
2019/10/18 Python
对Pytorch中Tensor的各种池化操作解析
2020/01/03 Python
pyspark 随机森林的实现
2020/04/24 Python
python实现人像动漫化的示例代码
2020/05/17 Python
使用npy转image图像并保存的实例
2020/07/01 Python
英国领先的野生鸟类食品供应商:GardenBird
2018/08/09 全球购物
瑞典的玛丽小姐:Miss Mary of Sweden
2019/02/13 全球购物
施工质量承诺书范文
2014/05/30 职场文书
党的群众路线教育实践活动组织生活会发言材料
2014/10/17 职场文书
贫困证明书范文
2015/06/16 职场文书
导游词之西安大清真寺
2019/12/17 职场文书
HTML+CSS制作心跳特效的实现
2021/05/26 HTML / CSS
MySQL sql模式设置引起的问题
2022/05/15 MySQL