在web開發(fā)中，經(jīng)常會遇到分頁的需求，如果靠我們手寫代碼，可能代碼又多 ，樣式又不好看，下面介紹一下jquery easyui 分頁功能，非常的方便簡單

然后按照《jquery EasyUI框架使用文檔》包含必要文件后，只要在$(function(){ }); 里插入下面的代碼即可：

 $('#pp').pagination(options);

下面來介紹Pagination的具體用法，首先來看屬性：

屬性名 類型 描述 默認值

total 數(shù)字 當分頁建立時設置記錄的總數(shù)量 1

pageSize 數(shù)字 每一頁顯示的數(shù)量 10

pageNumber 數(shù)字 當分頁建立時，顯示的頁數(shù) 1

pageList 數(shù)組 用戶可以修改每一頁的大小，

pageList屬性定義了多少種大小可以改變. [10,20,30,50]

loading 布爾 定義數(shù)據(jù)是否正在加載 false

buttons 數(shù)組 定義自定義按鈕，每個按鈕包含兩個屬性：

iconCls: 顯示背景圖像的CSS類

handler: 當一個按鈕被點擊時的處理函數(shù) null

showPageList 布爾 定義是否顯示頁面列表 true

showRefresh 布爾 定義是否顯示刷新按鈕 true

beforePageText 字符串 在輸入框組件前顯示的標簽 Page

afterPageText 字符串 在輸入框組件后顯示的標簽 of {pages}

displayMsg 字符串 顯示一個頁面的信息。

Displaying {from} to {to} of {total} items 事件事件名 參數(shù) 描述 onSelectPage pageNumber, pageSize 當用戶選擇一個新頁時觸發(fā)，回調(diào)函數(shù)包含兩個參數(shù)： pageNumber: 新頁面的頁數(shù) pageSize: 新頁面的大小 onBeforeRefresh pageNumber, pageSize 刷新按鈕被點擊之前觸發(fā)，如果返回false則取消刷新操作 onRefresh pageNumber, pageSize 刷新以后觸發(fā) onChangePageSize pageSize 當改變頁面大小時觸發(fā)演示

1.數(shù)據(jù)的提取和顯示。

DataGrid是通過url屬性獲取數(shù)據(jù)的。例如:url:'ListInfo.action',這樣通過調(diào)用Action中的方法獲取數(shù)據(jù)。返回的是JSON字串。注意，JSON字串必須按照DataGrid定義的數(shù)據(jù)格式進行拼裝。這種數(shù)據(jù)格式，可以參考我前面的文章中的附件。特別強調(diào)的是，JSON字串中的total域的值是數(shù)據(jù)的條數(shù)，用于數(shù)據(jù)的分頁。

2.數(shù)據(jù)的分頁。

數(shù)據(jù)的分頁分為前臺分頁和后臺分頁，前臺分頁，DataGrid已經(jīng)封裝好了。DataGrid定義了兩個參數(shù): rows(每頁的條數(shù))，page(當前的頁數(shù))，這兩個參數(shù)分別對應屬性pageSize，pageNumber。用戶可以在pageSize，pageNumber屬性中設置，也可以不設置，這樣就取默認值。我們只需在Action中定義兩個變量，private int rows; private int page; 接著通過SQL語句獲取需要取的值。分頁的SQL語句(Oracle)如下:

這樣提取的數(shù)據(jù)的條數(shù)賦值給total域，拼裝在JSON字串中返回，就可以實現(xiàn)分頁了。當然，pagination:true,是當然需要的。

3.數(shù)據(jù)的操作。

數(shù)據(jù)的操作大致可分為：查看，刪除。對于查看，我們可以通過onClickRow或onDblClickRow事件實現(xiàn)。如：

$(function(){

$('#test').datagrid({

title:'數(shù)據(jù)列表',

width:900,

height:500,

.......(省略的屬性)

onDblClickRow: function() {

var selected = $('#test').datagrid('getSelected');

if (selected){

window.open("DataView.action?Id="+selected.ID);

}}

這樣雙擊就可以查看了。

關(guān)于刪除，可以通過點擊刪除按鈕，調(diào)用刪除方法來實現(xiàn)。刪除按鈕可以在拼裝JSON字串的時候，賦值給OPERATION域，這樣設置{field:'OPERATION',title:'操作',width:120}，就可以在頁面上顯示刪除按鈕了。刪除的實現(xiàn)，如下：

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     

);

}

? ? ? 這樣頁面的刪除和數(shù)據(jù)庫中的刪除都實現(xiàn)了。

4.待解決的問題

如果返回的數(shù)據(jù)為空，則在IE瀏覽器下，頁面會有Bug。我的解決辦法是，把每個域設為""，這樣在頁面上就會出現(xiàn)一行空內(nèi)容的數(shù)據(jù)。如果遇到這個問題并解決的朋友，可以給我建議。

以上是jquery easyui 分頁的使用教程實例的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！