jQuery EasyUI 基礎(chǔ)插件 – Pagination 分頁
2018-01-19 16:36 更新
jQuery EasyUI 基礎(chǔ)插件 - Pagination 分頁
jQuery EasyUI 插件
通過 $.fn.pagination.defaults 重寫默認(rèn)的 defaults。
分頁（pagination）允許用戶通過翻頁導(dǎo)航數(shù)據(jù)。它支持頁面導(dǎo)航和頁面長度選擇的可配置選項(xiàng)。用戶可以在分頁的右側(cè)添加自定義按鈕來增強(qiáng)功能。
依賴
- linkbutton
用法
通過標(biāo)記創(chuàng)建分頁（pagination）。
<div id="pp" class="easyui-pagination" style="background:#efefef;border:1px solid #ccc;" data-options="total:2000,pageSize:10"> </div>
使用 javascript 創(chuàng)建分頁（pagination）。
<div id="pp" style="background:#efefef;border:1px solid #ccc;"></div>
$('#pp').pagination({
total:2000,
pageSize:10
});
讓我們通過面板（panel）和分頁（pagination）插件創(chuàng)建 ajax 分頁（pagination）。當(dāng)用戶選擇一個新的頁面時，面板（panel）將顯示指定頁面的相應(yīng)內(nèi)容。
<div id="content" class="easyui-panel" style="height:200px" data-options="href:'show_content.php?page=1'">
</div>
<div class="easyui-pagination" style="border:1px solid #ccc;" data-options=" total: 2000, pageSize: 10, onSelectPage: function(pageNumber, pageSize){ $('#content').panel('refresh', 'show_content.php?page='+pageNumber); }">
</div>
頂部的面板（panel）默認(rèn)顯示第一個頁面的內(nèi)容。當(dāng)用戶導(dǎo)航頁面時，'onSelectPage' 事件將被觸發(fā)，該事件為內(nèi)容面板（panel）調(diào)用 'refresh' 方法來加載帶有一個新的 URL 參數(shù)的新頁面內(nèi)容。
屬性
| 名稱 | 類型 | 描述 | 默認(rèn)值 |
|---|---|---|---|
| total | number | 記錄總數(shù)，應(yīng)該在創(chuàng)建分頁（pagination）時設(shè)置。 | 1 |
| pageSize | number | 頁面尺寸。（注：每頁顯示的最大記錄數(shù)） | 10 |
| pageNumber | number | 創(chuàng)建分頁（pagination）時顯示的頁碼。 | 1 |
| pageList | array | 用戶能改變頁面尺寸。pageList 屬性定義了能改成多大的尺寸。
代碼實(shí)例： $('#pp').pagination({
pageList: [10,20,50,100]
});
|
[10,20,30,50] |
| loading | boolean | 定義數(shù)據(jù)是否正在加載。 | false |
| buttons | array,selector | 定義自定義按鈕，可能的值：
1、數(shù)組，每個按鈕包含兩個屬性： iconCls：CSS class，它將顯示一個背景圖片 handler：當(dāng)按鈕被點(diǎn)擊時的處理函數(shù) 2、選擇器，指示按鈕。 按鈕可通過標(biāo)記聲明： <div class="easyui-pagination" style="border:1px solid #ccc" data-options=" total: 114, buttons: [{ iconCls:'icon-add', handler:function(){alert('add')} },'-',{ iconCls:'icon-save', handler:function(){alert('save')} }]">
</div>
按鈕也可以使用 javascript 創(chuàng)建： $('#pp').pagination({
total: 114,
buttons: [{
iconCls:'icon-add',
handler:function(){alert('add')}
},'-',{
iconCls:'icon-save',
handler:function(){alert('save')}
}]
});
|
null |
| layout | array | 分頁布局定義。該屬性自版本 1.3.5 起可用。
布局項(xiàng)目包括一個或多個下列值： 1、list：頁面尺寸列表。 2、sep：頁面按鈕分割。 3、first：第一個按鈕。 4、prev：前一個按鈕。 5、next：后一個按鈕。 6、last：最后一個按鈕。 7、efresh：刷新按鈕。 8、manual：允許輸入域頁碼的手動頁碼輸入框。 9、links：頁碼鏈接。 代碼實(shí)例： $('#pp').pagination({
layout:['first','links','last']
});
|
|
| links | number | 鏈接數(shù)量，只有當(dāng) 'links' 項(xiàng)包含在 'layout' 中時才是有效的。該屬性自版本 1.3.5 起可用。 | 10 |
| showPageList | boolean | 定義是否顯示頁面列表。 | true |
| showRefresh | boolean | 定義是否顯示刷新按鈕。 | true |
| beforePageText | string | 在 input 組件之前顯示 label。 | Page |
| afterPageText | string | 在 input 組件之后顯示 label。 | of {pages} |
| displayMsg | string | Display a page information. | 顯示 {from} to {to} of {total} 頁面信息。 |
事件
| 名稱 | 參數(shù) | 描述 |
|---|---|---|
| onSelectPage | pageNumber, pageSize | 當(dāng)用戶選擇新的頁面時觸發(fā)?；卣{(diào)函數(shù)包含兩個參數(shù)：
pageNumber：新的頁碼 pageSize：新的頁面尺寸 代碼實(shí)例： $('#pp').pagination({
onSelectPage:function(pageNumber, pageSize){
$(this).pagination('loading');
alert('pageNumber:'+pageNumber+',pageSize:'+pageSize);
$(this).pagination('loaded');
}
});
|
| onBeforeRefresh | pageNumber, pageSize | 刷新按鈕點(diǎn)擊之前觸發(fā)，返回 false 就取消刷新動作。 |
| onRefresh | pageNumber, pageSize | 刷新之后觸發(fā)。 |
| onChangePageSize | pageSize | 當(dāng)用戶改變頁面尺寸時觸發(fā)。 |
方法
| 名稱 | 參數(shù) | 描述 |
|---|---|---|
| options | none | 返回選項(xiàng)（options）對象。 |
| loading | none | 把分頁（pagination）變成正在加載（loading）狀態(tài)。 |
| loaded | none | 把分頁（pagination）變成加載完成（loaded）狀態(tài)。 |
| refresh | options | 刷新并顯示分頁信息。該方法自版本 1.3 起可用。
代碼實(shí)例： $('#pp').pagination('refresh'); // 刷新分頁欄信息
$('#pp').pagination('refresh',{ // 改變選項(xiàng)，并刷新分頁欄信息
total: 114,
pageNumber: 6
});
|
| select | page | 選擇一個新頁面。頁面索引從 1 開始。該方法從版本 1.3 起可用。
代碼實(shí)例： $('#pp').pagination('select'); // 刷新當(dāng)前頁面
$('#pp').pagination('select', 2); // 選擇第二頁
|
jQuery EasyUI 插件以上內(nèi)容是否對您有幫助：
更多建議：