> Pagination組件依賴于LinkButton(按鈕)組件 # 加載方式 ## Class加載 ``` <!--class 加載方式--> <div id="box" class="easyui-pagination" data-options="total:2000,pageSize:10" style="background:#efefef;border:1px solid #ccc;"> </div> ``` ## JS調用加載 ``` <div id="content" class="easyui-pannel" style="width: 100%;height: 300px;border:1px solid #ccc;"></div> <div id="box" style="background:#efefef;border:1px solid #ccc;"> </div> <script> $(function () { $('#box').pagination({ // 總記錄數 total : 5, // 每頁顯示條數 pageSize : 1, // 在分頁控件創建的時候顯示的頁數 pageNumber : 1, // 用戶可以改變頁面大小 pageList : [1,2], // 定義數據是否正在載入 loading : false, // 自定義按鈕 buttons : [{ iconCls : 'icon-add', handler : function () { alert('add'); }, },'-',{ iconCls : 'icon-save', handler : function () { alert('save'); }, }], //buttons : '#tt', // 分頁控件布局定義 //layout : ['first','links','last'], // 定義是否顯示頁面導航列表 showPageList : true, // 定義是否顯示刷新按鈕 showRefresh : false, // 在輸入組件之前顯示一個 label 標簽。 beforePageText : '第', // 在輸入組件之后顯示一個 label 標簽。 afterPageText : '共{pages}條', // 顯示頁面信息 displayMsg : '顯示{from}到{to},共{total}記錄', // 用戶選擇一個新頁面的時候觸發 onSelectPage : function (pageNumber, pageSize) { $('#content').panel('refresh', 'user.php?page='+pageNumber); }, onBeforeRefresh : function (pageNumber, pageSize) { alert('刷新之前觸發！'); }, onRefresh : function (pageNumber, pageSize) { alert('刷新之后觸發！'); }, onChangePageSize : function (pageSize) { alert('改變每頁顯示條數觸發！'); }, }); }); </script> ``` # 屬性列表 | 屬性名 | 值 | 說明 | | --- | --- | | total | number | 總記錄數，在分頁控件創建時初始的值。默認值1。| | pageSize | number | 每頁顯示條數。默認值10。| | pageNumber | number | 在分頁控件創建的時候顯示的頁數。默認值為1。| | pageList | array | 用戶可以改變頁面大小。pageList 屬性定義了頁 面 導 航 展 示 的 頁 碼 。 默 認 值 為[10,20,30,50]。| | loading | boolean | 定義數據是否正在載入。默認值為 false。| | buttons | array | 自定義按鈕，可用值有：1.每個按鈕都有2個屬性：iconCls：顯示背景圖片的 CSS 類 IDhandler：當按鈕被點擊時調用的一個句柄函數。2.頁面已存在元素的選擇器對象（例如：buttons:'#btnDiv'）。默認值為 null| | layout | array | 分頁控件布局定義。布局選項可以包含一個或多個值：1) list：頁面顯示條數列表。2) sep：頁面按鈕分割線。3) first：首頁按鈕。4) prev：上一頁按鈕。5) next：下一頁按鈕。6) last：尾頁按鈕。7) refresh：刷新按鈕。8) manual：手工輸入當前頁的輸入框。9) links：頁面數鏈接。| | showPageList | boolean | 定義是否顯示頁面導航列表。| | showRefresh | boolean | 定義是否顯示刷新按鈕。| | beforePageText | string | 在輸入組件之前顯示一個 label 標簽。| | afterPageText | string | 在輸入組件之后顯示一個 label 標簽。| | displayMsg | string | 顯示頁面信息。| # 事件列表 | 事件名 | 傳參 | 說明 | | --- | --- | | onSelectPage | pageNumber,pageSize | 用戶選擇一個新頁面的時候觸發。回調函數包含2個參數：pageNumber：新的頁數。pageSize: 每頁顯示的條數。| | onBeforeRefresh | pageNumber,pageSize | 在點擊刷新按鈕刷新之前觸發，返回false 可以取消刷新動作。| | onRefresh | pageNumber,pageSize | 刷新之后觸發。| | onChangePageSize | pageSize | 在頁面更改頁面大小的時候觸發。| # 方法列表 | 方法名 | 傳參 | 說明 | | --- | --- | | options | none | 返回參數對象。| | loading| none | 提醒分頁控件正在加載中。| | loaded | none | 提醒分頁控件加載完成。| | refresh | options | 刷新并顯示分頁欄信息。| | select | page | 選擇一個新頁面，頁面索引從1開始。| *** ``` //返回屬性對象 console.log($('#box').pagination('options')); //分頁控件加載和結束加載 onSelectPage : function (pageNumber, pageSize) { $('#box').pagination('loading'); $('#content').panel('refresh', 'user.php?page='+pageNumber+'&pagesize='+pageSize); setTimeout(function () { $('#box').pagination('loaded'); }, 1000); }, //刷新并顯示分欄信息 $(document).click(function () { $('#box').pagination('refresh', { 方法名 傳參 說明 options none 返回參數對象。 loading none 提醒分頁控件正在加載中。 loaded none 提醒分頁控件加載完成。 refresh options 刷新并顯示分頁欄信息。 select page 選擇一個新頁面，頁面索引從1開始。 pageSize : 2, }); }); //選擇一個新頁面，索引從 1 開始 $(document).click(function () { $('#box').pagination('select', 2); }); //可以使用$.fn.pagination.defaults 重寫默認值對象。 ```