插件描述：基于 layui 框架通过扩展nicePage.js实现JSON数据格式的自动表格分页和跳转功能配置简单上手速度快，兼容IE5+
更新时间：2018/11/26 下午4:56:45
更新说明：修改JSON数据，更加简洁直观。引用本地jquery文件,优化加载速度。
更新时间：2018/11/23 下午4:59:12
更新说明：修复nicepage.js中nicepage.limit错误。
标准json格式 目前只支持[{a:b,c:d},{a:b,c:d}]
var json=[{"id":"1","name":"Tom","age":"12"},{"id":"2","name":"Joy","age":"13"}]nameList与widthList的数组长度要一致
nameList//数组为表格列名,如['序号','姓名','年龄'] widthList//数组为列名的宽度,如['100','200','100']
初始化设置nicepage组件
进行数据组装,与layui交互进行元素渲染
/*
* @param {string} table table的div id
* @param {string} bar 底部分页的div id
* @param {int} limit 每页默认行数
* @param {string} color 底部分页的颜色
* @param {array} layout 底部分页的布局,具体可参考layui api
*
* @date 2018-10-19
* @author Thomas.dz
*/
//初始化
$(function() {
nicePage.setCfg({
table: 'table',
bar: 'pageBar',
limit: 20,
color: '#1E9FFF',
layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
});
});
//初始化完成
PREVIOUS:
NEXT:
相关插件-分页
讨论这个项目（35）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约
书山有路 0
2019/7/7 18:41:08
-
大神这个到底怎么重新渲染啊.重新调用一次方法都会报错
，0
2019/9/28 9:45:06
-
这个解决了么怎么弄得
新之助小朋友1
2021/8/30 15:51:02
解决了 ，
var btn = document.getElementById("button1");
btn.onclick = function() {
layui.use("laypage", function() {
var a = layui.laypage;
a.render({
elem: nicePage.bar,
limit: nicePage.limit,
theme: nicePage.color,
count: json.length,
layout: nicePage.layout,
jump: function(b) {
document.getElementById(nicePage.table).innerHTML = function() {
var c = [nicePage.returnHtml(nameList, widthList)],
d = nicePage.returnList(json).concat().splice(b.curr * b.limit - b.limit, b.limit);
layui.each(d, function(e, g) {
var f = nicePage.returnTable(g);
c.push(f)
});
c.push(" </table></br>");
return c.join("")
}()
}
})
})
}
技术部 - 孙云朋 0
2019/4/4 13:35:26
-
这个 支持JQ 么 还需要在项目中引入 layUI 么
原点0
2019/6/6 9:56:46
-
这个插件就是基于layUI的 建议直接到官网看
下次六级肯定过 0
2019/3/9 17:24:38
-
请问一下，我接收到websocket的json数据后，将它赋值给json，但是界面不显示，我重新选了每页可以显示的页码后，数据被加载，那么我要用哪个方法才能让它无刷新加载出来呢。
uuuuu0
2019/4/11 20:45:15
-
同问！解决了吗？
邢瑞东 0
2019/3/6 14:15:16
-
大佬，怎么重新加载一次初始化。
$ $0
2019/3/6 15:09:00
-
可以把layui 那个页面加载完执行的，写成一个函数 ，然后在ajax success之后 调用下写的那个函数
，0
2019/9/28 9:46:52
-
怎么弄得大佬
😃
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
😃
取消回复
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
