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 图片Silhouette Fadeins渐显效果
Feb 07 Javascript
ext combobox动态加载数据库数据(附前后台)
Jun 17 Javascript
原生js和jQuery写的网页选项卡特效对比
Apr 27 Javascript
JS实现的颜色实时渐变效果完整实例
Mar 25 Javascript
JS实现的手机端精简幻灯片效果
Sep 05 Javascript
AngularJs 禁止模板缓存的方法
Nov 28 Javascript
jQuery图片加载失败替换默认图片方法汇总
Nov 29 jQuery
基于VuePress 轻量级静态网站生成器的实现方法
Apr 17 Javascript
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
angular组件间通讯的实现方法示例
May 07 Javascript
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
Aug 28 Javascript
关于vue属性使用和不使用冒号的区别说明
Oct 22 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之数组学习
2011/05/29 PHP
php实现文件上传基本验证
2020/03/04 PHP
浅谈JavaScript编程语言的编码规范
2011/10/21 Javascript
Bootstrap三种表单布局的使用方法
2016/06/21 Javascript
Bootstrap Modal遮罩弹出层(完整版)
2016/11/21 Javascript
详解JS-- 浮点数运算处理
2016/11/28 Javascript
详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
2016/12/19 Javascript
微信小程序 数据交互与渲染实例详解
2017/01/21 Javascript
vue时间格式化实例代码
2017/06/13 Javascript
详解用webpack把我们的业务模块分开打包的方法
2017/07/20 Javascript
基于构造函数的五种继承方法小结
2017/07/27 Javascript
Mint UI 基于 Vue.js 移动端组件库
2017/11/07 Javascript
Vue创建头部组件示例代码详解
2018/10/23 Javascript
VUE注册全局组件和局部组件过程解析
2019/10/10 Javascript
微信小程序获取公众号文章列表及显示文章的示例代码
2020/03/10 Javascript
JavaScript 闭包的使用场景
2020/09/17 Javascript
VSCode下配置python调试运行环境的方法
2018/04/06 Python
Python GUI Tkinter简单实现个性签名设计
2018/06/19 Python
解决sublime+python3无法输出中文的问题
2018/12/12 Python
Python实现高斯函数的三维显示方法
2018/12/29 Python
Python数据类型之Number数字操作实例详解
2019/05/08 Python
pytz格式化北京时间多出6分钟问题的解决方法
2019/06/21 Python
python腾讯语音合成实现过程解析
2019/08/01 Python
Python中BeautifuSoup库的用法使用详解
2019/11/15 Python
Django生成PDF文档显示网页上以及PDF中文显示乱码的解决方法
2019/12/17 Python
python中resample函数实现重采样和降采样代码
2020/02/25 Python
python 画图 图例自由定义方式
2020/04/17 Python
HTML5中indexedDB 数据库的使用实例
2017/05/11 HTML / CSS
香港万宁官方海外旗舰店:香港健与美连锁店
2018/09/27 全球购物
输入一行文字,找出其中大写字母、小写字母、空格、数字、及其他字符各有多少
2016/04/15 面试题
工厂采购员岗位职责
2014/04/08 职场文书
我的中国梦演讲稿初中篇
2014/08/19 职场文书
欢迎词范文
2015/01/27 职场文书
质检员岗位职责
2015/02/03 职场文书
董事长助理岗位职责
2015/02/11 职场文书
初中毕业感言300字
2015/07/31 职场文书