jquery easyui 分頁的使用教學實例

在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中文網其他相關文章！