JSON自动分页包含跳转功能

JSON自动分页包含跳转功能

NicePage:基于强大的 layui 框架,通过扩展laypage.js,nicePage.js实现JSON数据格式的自动表格分页和跳转功能,配置简单,上手速度快,兼容IE5+。


使用方法:

  1.复制js,css文件到项目中,引用目录下的layui.css,layui.js,nicePage.js文件,通过nicePage.setCfg()初始化,即可!

//标准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的数组长度要一致
var nameList = ['序号', '姓名', '年龄'] //数组为表格列名,如['序号','姓名','年龄']
var widthList = ['100', '200', '100'] //数组为列名的宽度,如['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']
    });
});
//初始化完成

DEMO地址:http://nicezz.com/NicePage/index.html


GitHub地址:https://github.com/duzhen-cn/Nicepage