laypage.js分页插件使用方法详解
网络编程 2021-07-04 15:51www.168986.cn编程入门
这篇文章主要为大家详细介绍了laypage.js分页插件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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、效果图
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程