JSON自動分頁包含跳轉功能
阿新 • • 發佈:2018-12-16
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'] }); }); //初始化完成