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 相关文章推荐
jQuery插件的写法分享
Jun 12 Javascript
JS+CSS 制作的超级简单的下拉菜单附图
Nov 22 Javascript
浅析JavaScript中的delete运算符
Nov 30 Javascript
Window.Open如何在同一个标签页打开
Jun 20 Javascript
Extjs根据条件设置表格某行背景色示例
Jul 23 Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
Jan 21 Javascript
JS实现设置ff与ie元素绝对位置的方法
Mar 08 Javascript
jQuery学习之DOM节点的插入方法总结
Jan 22 Javascript
最实用的JS数组函数整理
Dec 05 Javascript
JS选取DOM元素常见操作方法实例分析
Dec 10 Javascript
Vue项目中使用flow做类型检测的方法
Mar 18 Javascript
es6函数中的作用域实例分析
Apr 18 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数据库操作类代码(增,删,改,查)
2013/04/08 PHP
PHP Session 变量的使用方法详解与实例代码
2013/09/11 PHP
php基本函数汇总
2015/07/09 PHP
用document.documentElement取代document.body的原因分析
2009/11/12 Javascript
return false,对阻止事件默认动作的一些测试代码
2010/11/17 Javascript
js控制表单奇偶行样式的简单方法
2013/07/31 Javascript
For循环中分号隔开的3部分的执行顺序探讨
2014/05/27 Javascript
jquery移动节点实例
2015/01/14 Javascript
Javascript 实现放大镜效果实例详解
2016/12/03 Javascript
node.js调用Chrome浏览器打开链接地址的方法
2017/05/17 Javascript
浅谈在koa2中实现页面渲染的全局数据
2017/10/09 Javascript
详解使用mpvue开发github小程序总结
2018/07/25 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
2018/09/27 Javascript
vue实现鼠标移入移出事件代码实例
2019/03/27 Javascript
Javascript实现秒表计时游戏
2020/05/27 Javascript
Node.js中出现未捕获异常的处理方法
2020/06/29 Javascript
[01:31:22]Ti4 循环赛第四日附加赛LGD vs Mouz
2014/07/13 DOTA
Python中设置变量作为默认值时容易遇到的错误
2015/04/03 Python
python进阶_浅谈面向对象进阶
2017/08/17 Python
浅谈Python使用Bottle来提供一个简单的web服务
2017/12/27 Python
Python何时应该使用Lambda函数
2019/07/02 Python
Spring实战之使用util:命名空间简化配置操作示例
2019/12/09 Python
python实现的分析并统计nginx日志数据功能示例
2019/12/21 Python
基于python纯函数实现井字棋游戏
2020/05/27 Python
python能自学吗
2020/06/18 Python
前端H5 Video常见使用场景简介
2020/08/21 HTML / CSS
一套.net面试题及答案
2016/11/02 面试题
C#中的验证控件有几种
2014/03/08 面试题
介绍一下Python中webbrowser的用法
2013/05/07 面试题
一套Delphi的笔试题二
2013/05/11 面试题
数控技术应用个人求职信范文
2014/02/03 职场文书
大学生就业自荐书
2014/06/16 职场文书
素质教育标语
2014/06/27 职场文书
党员个人对照检查材料范文
2014/09/24 职场文书
学校证明范文
2015/06/24 职场文书
python全面解析接口返回数据
2022/02/12 Python