在web開發中，常常會遇到分頁的需求，如果靠我們手寫程式碼，可能程式碼又多，樣式又不好看，下面介紹一下jquery easyui 分頁功能，非常的方便簡單
然後依照《jquery EasyUI框架使用文件》包含必要文件後，只要在$(function(){ }); 內插入下面的程式碼即可：
$('#pp').pagination(options);
登入後複製
下面來介紹Pagination的具體用法，首先來看屬性：
屬性名類型描述預設值
total 數字當分頁建立時設定記錄的總數量1
pageSize 數字每一頁顯示的數量10
pageNumber 數字當分頁建立時，顯示的頁數1
pageList 陣列使用者可以修改每一頁的大小，
pageList屬性定義了多少種大小可以改變. [10,20,30,50]
loading 布林定義資料是否正在載入false
buttons 陣列定義自訂按鈕，每個按鈕包含兩個屬性：
iconCls: 顯示背景圖像的CSS類別
handler: 當一個按鈕被點擊時的處理函數null
showPageList 布林定義是否顯示頁面列表true
showRefresh 布林定義是否顯示刷新按鈕true
beforePageText 字串在輸入框組件前顯示的標籤Page
afterPageText 字串在輸入框元件後顯示的標籤of {pages}
displayMsg 字串顯示一個頁面的資訊。
Displaying {from} to {to} of {total} items 事件事件名參數描述onSelectPage pageNumber, pageSize 當使用者選擇一個新頁時觸發，回呼函數包含兩個參數： pageNumber: 新頁面的頁數pageSize: 新頁面的大小onBeforeRefresh pageNumber, pageSize 刷新按鈕被點擊之前觸發，如果返回false則取消刷新操作onRefresh pageNumber, pageSize 刷新以後觸發onChangePageSize pageSize 當更改頁面大小時觸發演示演示
##### ######1.資料的擷取與顯示。 #########DataGrid是透過url屬性取得資料的。例如:url:'ListInfo.action',這樣透過呼叫Action中的方法來取得資料。傳回的是JSON字符串。注意，JSON字符串必須按照DataGrid定義的資料格式進行拼裝。這種資料格式，可以參考我前面的文章中的附件。特別強調的是，JSON字符串中的total域的值是資料的條數，用於資料的分頁。 #########2.資料的分頁。 #########資料的分頁分成前台分頁和後台分頁，前台分頁，DataGrid已經封裝好了。 DataGrid定義了兩個參數: rows(每頁的條數)，page(目前的頁數)，這兩個參數分別對應屬性pageSize，pageNumber。使用者可以在pageSize，pageNumber屬性中設置，也可以不設置，這樣就取預設值。我們只需在Action中定義兩個變量，private int rows; private int page; 接著透過SQL語句來取得需要取的值。分頁的SQL語句(Oracle)如下:######這樣提取的資料的條數賦值給total域，拼裝在JSON字符串中返回，就可以實現分頁了。當然，###pagination:true,###是當然需要的。 #########3.資料的操作。 #########資料的操作大致可分為：查看，刪除。對於查看，我們可以透過onClickRow或onDblClickRow事件實現。如：###
$(function(){
$('#test').datagrid({
title:'数据列表',
width:900,
height:500,
.......(省略的属性)
onDblClickRow: function() {
var selected = $('#test').datagrid('getSelected');
if (selected){
window.open("DataView.action?Id="+selected.ID);
}}登入後複製
###這樣雙擊就可以查看了。 ######關於刪除，可以點選刪除按鈕，呼叫刪除方法來實現。刪除按鈕可以在拼裝JSON字符串的時候，賦值給OPERATION域，這樣設定{field:'OPERATION',title:'操作',width:120}，就可以在頁面上顯示刪除按鈕了。刪除的實現，如下：###
function DelAff(){
$.messager.confirm('确认','是否真的删除?',function(r){
if (r){
var selected = $('#test').datagrid('getSelected');
if (selected){
var index = $('#test').datagrid('getRowIndex', selected);
$('#test').datagrid('deleteRow', index);
DeleteSubmit(selected);
}
}
});
}
function DeleteSubmit(selected)
{
var url="DataDelete.action?Id="+selected.ID;
$.post(
url
);
}登入後複製
### 這樣頁面的刪除和資料庫中的刪除都實現了。 ######4.待解決的問題######如果傳回的資料為空，則在###IE瀏覽器###下，頁面會有Bug。我的解決方法是，把每個網域設為""，這樣在頁面上就會出現一行空內容的資料。如果遇到這個問題並解決的朋友，可以給我建議。 ###
以上是jquery easyui 分頁的使用教學實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！
