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基本语法分析说明
Jun 15 Javascript
简介alert()与console.log()的不同
Aug 26 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
Jul 08 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
Aug 19 Javascript
如何使用vuejs实现更好的Form validation?
Apr 07 Javascript
JavaScript canvas实现围绕旋转动画
Nov 18 Javascript
详解node.js 下载图片的 2 种方式
Mar 02 Javascript
基于vue2的canvas时钟倒计时组件步骤解析
Nov 05 Javascript
详解Vue CLI 3.0脚手架如何mock数据
Nov 23 Javascript
详解ES6中的Map与Set集合
Mar 22 Javascript
vue-router 按需加载 component: () =&gt; import() 报错的解决
Sep 22 Javascript
ant design 日期格式化的实现
Oct 27 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车辆违章查询数据示例
2016/10/14 PHP
Javascript实例教程(19) 使用HoTMetal(6)
2006/12/23 Javascript
JS应用之禁止抓屏、复制、打印
2008/02/21 Javascript
关于scrollLeft,scrollTop的浏览器兼容性测试
2013/03/19 Javascript
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
2013/08/29 Javascript
javascript实现json页面分页实例代码
2014/02/20 Javascript
使用原生js写的一个简单slider
2014/04/29 Javascript
javascript实现的固定位置悬浮窗口实例
2015/04/30 Javascript
jquery实现的蓝色二级导航条效果代码
2015/08/24 Javascript
jQuery插件Timelinr 实现时间轴特效
2015/10/04 Javascript
详解javascript实现瀑布流列式布局
2016/01/29 Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
2017/09/26 Javascript
讲解vue-router之什么是编程式路由
2018/05/28 Javascript
vue通过style或者class改变样式的实例代码
2018/10/30 Javascript
javascript function(函数类型)使用与注意事项小结
2019/06/10 Javascript
vue 查看dist文件里的结构(多种方式)
2020/01/17 Javascript
JavaScript Image对象实现原理实例解析
2020/08/26 Javascript
[53:13]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS LGD-GAMING
2014/05/22 DOTA
实例讲解Python设计模式编程之工厂方法模式的使用
2016/03/02 Python
pandas object格式转float64格式的方法
2018/04/10 Python
tensorflow: 查看 tensor详细数值方法
2018/06/13 Python
Python3匿名函数用法示例
2018/07/25 Python
python添加模块搜索路径和包的导入方法
2019/01/19 Python
flask框架json数据的拿取和返回操作示例
2019/11/28 Python
Python读取配置文件(config.ini)以及写入配置文件
2020/04/08 Python
为什么相对PHP黑python的更少
2020/06/21 Python
解决html5中video标签无法播放mp4问题的办法
2017/05/07 HTML / CSS
技术总监个人的自我评价范文
2013/12/18 职场文书
人事专员岗位职责范本
2014/03/04 职场文书
新春联欢会主持词
2014/03/24 职场文书
服务标语口号
2014/07/01 职场文书
党建目标管理责任书
2014/07/25 职场文书
廉政承诺书2015
2015/04/28 职场文书
入党宣誓仪式主持词
2015/06/29 职场文书
2019奶茶店创业计划书范本,值得你借鉴
2019/08/14 职场文书
Python加密技术之RSA加密解密的实现
2022/04/08 Python