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