laypage.js分页插件使用方法详解


Posted in Javascript onJuly 27, 2019

本文实例为大家分享了laypage.js分页插件的使用方法,供大家参考,具体内容如下

1、引用依赖

a.layui.js

b.layui.css

c.laypage.js

2、HTML代码部分

<div id="page-nav" style="float: right"></div>

3、js代码部分

<script>
 
  $(function(){
    //加载菜单列表数据
    menuPageData();
  });
 
  function menuPageData() {
 
    //以下将以jquery.ajax为例,演示一个异步分页
    $.getJSON('../../menu/page/1', {
        rows : 10 //每页显示的数据条数
      },
      function (res) { //从第1页开始请求。返回的json格式可以任意定义
        laypage({
          cont: 'page-nav', //容器。值支持id名、原生dom对象,jquery对象。【如该容器为】:<div id="page1"></div>
          pages: res.pageCount, //通过后台拿到的总页数
          curr: 1, //初始化当前页
          skin: '#5a98de',//皮肤颜色
          groups: 5, //连续显示分页数
          skip: true, //是否开启跳页
          count:res.total, //数据总数
          limit: 10, //每页显示的条数。laypage将会借助 count 和 limit 计算出分页数
          limits:[10, 20, 30, 40, 50], //每页条数的选择项。如果 layout 参数开启了 limit,则会出现每页条数的select选择框
          first: '首页', //若不显示,设置false即可
          last: '尾页', //若不显示,设置false即可
          prev: '上一页', //若不显示,设置false即可
          next: '下一页', //若不显示,设置false即可
          jump: function (e) { //触发分页后的回调
            $.getJSON('../../menu/page/' + e.curr, {
              rows : 10 //每页显示的数据条数
            }, function (res) {
 
              console.log(res.rows);
              var data = res.rows;
              $("#total-text").html(res.total);
              /*解析表格分页数据*/
              analysisTableData(data);
 
            });
          }
        });
      });
  }
 
</script>

4、效果图

laypage.js分页插件使用方法详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Prototype 学习 工具函数学习($A方法)
Jul 12 Javascript
JavaScript中的包装对象介绍
Jan 27 Javascript
JavaScript中的依赖注入详解
Mar 18 Javascript
JavaScript文本框脚本编写的注意事项
Jan 25 Javascript
JS生成不重复的随机数组的简单实例
Jul 10 Javascript
jQuery获取Table某列的值(推荐)
Mar 03 Javascript
react.js CMS 删除功能的实现方法
Apr 17 Javascript
微信小程序 标签传入数据
May 08 Javascript
原生JS获取元素的位置与尺寸实现方法
Oct 18 Javascript
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
Jun 17 Javascript
js 实现 list转换成tree的方法示例(数组到树)
Aug 18 Javascript
用Golang运行JavaScript的实现示例
Nov 25 Javascript
layui2.0使用table+laypage实现真分页
Jul 27 #Javascript
微信小程序 腾讯地图显示偏差问题解决
Jul 27 #Javascript
基于layPage插件实现两种分页方式浅析
Jul 27 #Javascript
基于ssm框架实现layui分页效果
Jul 27 #Javascript
layUI实现前端分页和后端分页
Jul 27 #Javascript
layui实现数据分页功能(ajax异步)
Jul 27 #Javascript
layui实现数据表格table分页功能(ajax异步)
Jul 27 #Javascript
You might like
PHP投票系统防刷票判断流程分析
2012/02/04 PHP
PHP学习笔记(三):数据类型转换与常量介绍
2015/04/17 PHP
PHP生成可点击刷新的验证码简单示例
2016/05/13 PHP
PHP SESSION机制的理解与实例
2019/03/22 PHP
js select常用操作控制代码
2010/03/16 Javascript
JQuery实现的在新窗口打开链接的方法小结
2010/04/22 Javascript
基于jquery封装的一个js分页
2011/11/15 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
2013/08/30 Javascript
深入剖析JavaScript中的枚举功能
2014/03/06 Javascript
javascript移动设备Web开发中对touch事件的封装实例
2014/06/05 Javascript
cocos2dx骨骼动画Armature源码剖析(三)
2015/09/08 Javascript
JS实现弹出居中的模式窗口示例
2016/06/20 Javascript
BootStrap实现手机端轮播图左右滑动事件
2016/10/13 Javascript
原生js简单实现放大镜特效
2017/05/16 Javascript
Vue实例中生命周期created和mounted的区别详解
2017/08/25 Javascript
[15:56]Heroes18_暗影萨满(完美)
2014/10/31 DOTA
Python正则表达式教程之三:贪婪/非贪婪特性
2017/03/02 Python
Django中的Model操作表的实现
2018/07/24 Python
详解django自定义中间件处理
2018/11/21 Python
pygame实现俄罗斯方块游戏(AI篇2)
2019/10/29 Python
python获取引用对象的个数方式
2019/12/20 Python
tensorflow2.0保存和恢复模型3种方法
2020/02/03 Python
Django静态文件加载失败解决方案
2020/08/26 Python
Python接口自动化测试的实现
2020/08/28 Python
SOA面试题:如何在SOA中实现松耦合
2013/07/21 面试题
大二学期个人自我评价
2014/01/13 职场文书
铲车司机岗位职责
2014/03/15 职场文书
责任心演讲稿
2014/05/14 职场文书
营业用房租赁协议书
2014/11/26 职场文书
先进班集体事迹材料
2014/12/25 职场文书
职工培训工作总结
2015/08/10 职场文书
感恩教师主题班会
2015/08/12 职场文书
2015年秋学期师德师风建设工作总结
2015/10/23 职场文书
2016年五一促销广告语
2016/01/28 职场文书
终止合同协议书范本
2016/03/22 职场文书
关于战胜挫折的名言警句大全!
2019/07/05 职场文书