1. 程式人生 > >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']
				});
			});
			//初始化完成