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 相关文章推荐
JS 的应用开发初探(mootools)
Dec 19 Javascript
js DOM模型操作
Dec 28 Javascript
$.format,jquery.format 使用说明
Jul 13 Javascript
JavaScript+html5 canvas绘制的小人效果
Jan 27 Javascript
Bootstrap源码解读按钮(5)
Dec 23 Javascript
js canvas实现放大镜查看图片功能
Jun 08 Javascript
angular+ionic返回上一页并刷新页面
Aug 08 Javascript
ES6中Array.includes()函数的用法
Sep 20 Javascript
Vue中的v-for循环key属性注意事项小结
Aug 12 Javascript
CryptoJS中AES实现前后端通用加解密技术
Dec 18 Javascript
javascript实现固定侧边栏
Feb 09 Javascript
微信小程序中使用vant框架的具体步骤
Feb 18 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配置文件中最常用四个ini函数
2007/03/19 PHP
php中根据某年第几天计算出日期年月日的代码
2011/02/24 PHP
关于二级目录拖拽排序的实现(源码示例下载)
2013/04/26 PHP
php读取纯真ip数据库使用示例
2014/01/26 PHP
PHP SESSION跨页面传递失败解决方案
2020/12/11 PHP
用javascript实现的仿Flash广告图片轮换效果
2007/04/24 Javascript
JS Loading功能的简单实现
2013/11/29 Javascript
改变状态栏文字的js代码
2014/06/13 Javascript
bootstrap监听滚动实现头部跟随滚动
2016/11/08 Javascript
JS排序之选择排序详解
2017/04/08 Javascript
jquery submit()不能提交表单的解决方法
2017/04/24 jQuery
js每隔两秒输出数组中的一项(实例)
2017/05/28 Javascript
javaScript产生随机数的用法小结
2018/04/21 Javascript
Vue动态组件与异步组件实例详解
2019/02/23 Javascript
python获取糗百图片代码实例
2013/12/18 Python
Python中使用urllib2防止302跳转的代码例子
2014/07/07 Python
Python编程中字符串和列表的基本知识讲解
2015/10/14 Python
Python中functools模块函数解析
2017/03/12 Python
Python rstrip()方法实例详解
2018/11/11 Python
python+selenium+chrome批量文件下载并自动创建文件夹实例
2020/04/27 Python
python继承threading.Thread实现有返回值的子类实例
2020/05/02 Python
基于pandas向csv添加新的行和列
2020/05/25 Python
Python如何实现的二分查找算法
2020/05/27 Python
基于python实现破解滑动验证码过程解析
2020/05/28 Python
Python3 webservice接口测试代码详解
2020/06/23 Python
CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
2017/08/18 HTML / CSS
CSS3实现头像旋转效果
2017/03/13 HTML / CSS
亚洲独特体验旅游专家:eOasia
2018/08/15 全球购物
写一个在SQL Server创建表的SQL语句
2012/03/10 面试题
后勤人员自我评价怎么写
2013/09/19 职场文书
保护环境建议书
2014/03/12 职场文书
清明节演讲稿
2014/05/27 职场文书
施工单位安全责任书
2014/07/24 职场文书
安全目标管理责任书
2014/07/25 职场文书
销售口号霸气押韵
2015/12/24 职场文书
Java生成日期时间存入Mysql数据库的实现方法
2022/03/03 Java/Android