JSON自动分页 DEMO
#基于强大的layui 框架,通过扩展nicePage.js实现JSON数据格式的自动表格分页和跳转功能,配置简单,上手速度快,兼容IE5+。
日期 | 日出时刻 | 最高温 | 最低温 | 日落时间 | 空气指数 | 风向 | 风力 | 天气 | 提示 |
18日星期四 | 06:06 | 高温 16.0℃ | 低温 9.0℃ | 17:20 | 41 | 北风 | 3-4级 | 晴 | 愿你拥有比阳光明媚的心情 |
19日星期五 | 06:07 | 高温 17.0℃ | 低温 10.0℃ | 17:19 | 66 | 无持续风向 | 3-4级 | 晴 | 愿你拥有比阳光明媚的心情 |
20日星期六 | 06:08 | 高温 18.0℃ | 低温 12.0℃ | 17:18 | 68 | 南风 | 3-4级 | 多云 | 阴晴之间,谨防紫外线侵扰 |
21日星期日 | 06:09 | 高温 19.0℃ | 低温 15.0℃ | 17:16 | 57 | 南风 | 3-4级 | 阴 | 不要被阴云遮挡住好心情 |
22日星期一 | 06:10 | 高温 19.0℃ | 低温 14.0℃ | 17:15 | 49 | 南风 | 3-4级 | 阵雨 | 阵雨来袭,出门记得带伞 |
18日星期四 | 06:06 | 高温 16.0℃ | 低温 9.0℃ | 17:20 | 41 | 北风 | 3-4级 | 晴 | 愿你拥有比阳光明媚的心情 |
19日星期五 | 06:07 | 高温 17.0℃ | 低温 10.0℃ | 17:19 | 66 | 无持续风向 | 3-4级 | 晴 | 愿你拥有比阳光明媚的心情 |
20日星期六 | 06:08 | 高温 18.0℃ | 低温 12.0℃ | 17:18 | 68 | 南风 | 3-4级 | 多云 | 阴晴之间,谨防紫外线侵扰 |
21日星期日 | 06:09 | 高温 19.0℃ | 低温 15.0℃ | 17:16 | 57 | 南风 | 3-4级 | 阴 | 不要被阴云遮挡住好心情 |
22日星期一 | 06:10 | 高温 19.0℃ | 低温 14.0℃ | 17:15 | 49 | 南风 | 3-4级 | 阵雨 | 阵雨来袭,出门记得带伞 |
//标准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']
});
});
//初始化完成
dedemao