jQuery EasyUI 教學-Pagination（分頁）

這一款js分頁使用起來很爽，我自己常用，做專案時總是要翻以前的專案看，由於不方便，就把他寫出來方便自己，方便他人。

使用$.fn.pagination.defaults重寫預設值物件。

此分頁控制項允許使用者導覽頁面的資料。它支援頁面導航和頁面長度選擇的選項設定。使用者可以在分頁控制項上新增自訂按鈕，以增強其功能。

使用案例：

透過標籤和Javascript兩種方法來建立分頁控制項。

1、使用標籤建立分頁控制項。

<div id=”pp” class=”easyui-pagination” data-options=”total:2000,pageSize:10″ 
style=”background:#efefef;border:1px solid #ccc;”></div>

2、使用Javascript建立分頁控制項。

<div id=”pp” style=”background:#efefef;border:1px solid #ccc;”></div>

$(‘#pp’).pagination({
total:2000,
pageSize:10
});

讓我們使用面板和分頁插件來建立一個ajax分頁。當使用者選擇一個新頁面的時候，面板將顯示指定頁面的內容。

<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=”
).panel(‘refresh’, ‘show_content.php?page=’+pageNumber);
}”>
</div>

面板上預設顯示第一頁的內容。當使用者導航頁面的時候，’onSelectPage’事件將會被觸發，將會根據一個新的URL參數取得對應頁面的新內容，並透過’refresh’方法將內容刷新到內容面板上。

屬性：

numberpageSizenumber頁面大小。 pageNumbernumber在分頁控制項所建立的時候顯示的頁數。 pageListarray用戶可以改變頁面大小。 pageList屬性定義了頁面導覽展示的頁碼。程式碼範例：

$('#pp').pagination({
	pageList: [10,20,50,100]
});

loadingboolean定義資料是否正在載入。 buttonslayout。 事件：

屬性名	屬性值類型	描述
total	number	總記錄
		array 自訂按鈕，可用值有： ①. 每個按鈕都有2個屬性： iconCls：顯示背景圖片的CSS類ID handler：當按鈕被點擊時調用的一個句柄函數。 ②. 頁面已存在元素的選擇器物件（例如：buttons:'#btnDiv'）（此屬性值自1.3.4版開始可用）自訂按鈕可以透過標籤建立： <div class="easyui-pagination" style ="border:1px solid #ccc" data-options=" total: 114, buttons: [{ iconCls:&#39;icon-add&#39;, handler:function(){alert(&#39;add&#39;)} },&#39;-&#39;,{ iconCls:&#39;icon-save&#39;, handler:function(){alert(&#39;save&#39;)} }]"> </div> 自訂按鈕也可以透過Javascript建立： $(&#39;#pp&#39;).pagination({ total: 114, buttons: [{ iconCls:&#39;icon-add&#39;, handler:function(){alert(&#39;add&#39;)} },&#39;-&#39;,{ iconCls:&#39;icon-save&#39;, handler:function(){alert(&#39;save&#39;)} }] });
		array 分頁控制佈局定義。 （此屬性值自1.3.5版開始可用） 版面配置選項可以包含一個或多個值： 1) list：頁麵顯示條數清單。 2) sep：頁面按鈕分割線。 3) first：首頁按鈕。 4) prev：上一頁按鈕。 5) next：下一頁按鈕。 6) last：尾頁按鈕。 7) refresh：刷新按鈕。 8) manual：手動輸入目前頁的輸入框。 9) links：頁數連結。 範例程式碼： $(&#39;#pp&#39;).pagination({ layout:[&#39;first&#39;,&#39;links&#39;,&#39;last&#39;] }); 🎜🎜🎜
showPageList	boolean	定義是否顯示頁面導航清單
showRefresh	boolean
在輸入組件之前顯示一個label標籤		afterPageText string 在輸入組件之後顯示一個label標籤
displayMsg
		方法：

 以上是jQuery EasyUI 教學-Pagination（分網）的內容，PQueryPcnUIPH.