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 相关文章推荐
加速IE的Javascript document输出的方法
Dec 02 Javascript
JQuery显示隐藏DIV的方法及代码实例
Apr 16 Javascript
jquery实现网站列表切换效果的2种方法
Aug 12 Javascript
JavaScript简单下拉菜单特效
Sep 13 Javascript
JS正则表达式修饰符中multiline(/m)用法分析
Dec 27 Javascript
JS正则匹配中文的方法示例
Jan 06 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
Nov 01 Javascript
JS中的BOM应用
Feb 02 Javascript
vue+webpack中配置ESLint
Nov 07 Javascript
vue router 通过路由来实现切换头部标题功能
Apr 24 Javascript
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
Apr 28 Javascript
原生JS中应该禁止出现的写法
May 05 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 变量类型的强制转换
2009/10/23 PHP
PHP中串行化用法示例
2016/11/16 PHP
php使用gd2绘制基本图形示例(直线、圆、正方形)
2017/02/15 PHP
extjs fckeditor集成代码
2009/05/10 Javascript
由JavaScript技术实现的web小游戏(不含网游)
2010/06/12 Javascript
jQuery层次选择器选择元素使用介绍
2013/04/18 Javascript
jquery中对于批量deferred的处理方法
2014/01/22 Javascript
脚本合并提升javascript性能示例
2014/02/24 Javascript
javascript校验价格合法性实例(必须输入2位小数)
2014/05/05 Javascript
JavaScript和CSS交互的方法汇总
2014/12/02 Javascript
jQuery实现菜单式图片滑动切换
2015/03/14 Javascript
javascript将DOM节点添加到文档的方法实例分析
2015/08/04 Javascript
纯HTML5制作围住神经猫游戏-附源码下载
2015/08/23 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
2016/07/25 Javascript
javascript实现Java中的Map对象功能的实例详解
2017/08/21 Javascript
weex里Vuex state使用storage持久化详解
2017/09/09 Javascript
vue项目tween方法实现返回顶部的示例代码
2018/03/02 Javascript
nodeJS模块简单用法示例
2018/04/21 NodeJs
Vue中使用的EventBus有生命周期
2018/07/12 Javascript
基于layui框架响应式布局的一些使用详解
2019/09/16 Javascript
python实现查询IP地址所在地
2015/03/29 Python
python利用urllib实现爬取京东网站商品图片的爬虫实例
2017/08/24 Python
python 读取.csv文件数据到数组(矩阵)的实例讲解
2018/06/14 Python
Python 文本文件内容批量抽取实例
2018/12/10 Python
详解python 破解网站反爬虫的两种简单方法
2020/02/09 Python
CSS3中background-clip和background-origin的区别示例介绍
2014/03/10 HTML / CSS
英国马莎百货官网:Marks & Spencer
2016/07/29 全球购物
德国传统玻璃制造商:Cristalica
2018/04/23 全球购物
Waterford英国官方网站:世界上最受欢迎的优质水晶品牌
2019/08/17 全球购物
某科技软件测试面试题
2013/05/19 面试题
医学专业毕业生个人求职信
2013/12/25 职场文书
《燕子》教学反思
2014/02/18 职场文书
模具专业毕业推荐信
2014/03/08 职场文书
初中语文教学反思范文
2016/03/03 职场文书
员工升职自我评价
2019/03/26 职场文书
JavaScript展开运算符和剩余运算符的区别详解
2022/02/18 Javascript