jQuery EasyUI 基礎(chǔ)插件 – Pagination 分頁

2018-01-19 16:36 更新

jQuery EasyUI 基礎(chǔ)插件 - Pagination 分頁


jQuery EasyUI 插件jQuery EasyUI 插件

通過 $.fn.pagination.defaults 重寫默認(rèn)的 defaults。

分頁(pagination)允許用戶通過翻頁導(dǎo)航數(shù)據(jù)。它支持頁面導(dǎo)航和頁面長度選擇的可配置選項(xiàng)。用戶可以在分頁的右側(cè)添加自定義按鈕來增強(qiáng)功能。

pagination


依賴

  • 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 插件jQuery EasyUI 插件
以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號