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

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

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

下面來(lái)介紹Pagination的具體用法，首先來(lái)看屬性：

屬性名 類(lèi)型 描述 默認(rèn)值

total 數(shù)字 當(dāng)分頁(yè)建立時(shí)設(shè)置記錄的總數(shù)量 1

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

pageNumber 數(shù)字 當(dāng)分頁(yè)建立時(shí)，顯示的頁(yè)數(shù) 1

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

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

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

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

iconCls: 顯示背景圖像的CSS類(lèi)

handler: 當(dāng)一個(gè)按鈕被點(diǎn)擊時(shí)的處理函數(shù) null

showPageList 布爾 定義是否顯示頁(yè)面列表 true

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

beforePageText 字符串 在輸入框組件前顯示的標(biāo)簽 Page

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

displayMsg 字符串 顯示一個(gè)頁(yè)面的信息。

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

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

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

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

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

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

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

數(shù)據(jù)的操作大致可分為：查看，刪除。對(duì)于查看，我們可以通過(guò)onClickRow或onDblClickRow事件實(shí)現(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)于刪除，可以通過(guò)點(diǎn)擊刪除按鈕，調(diào)用刪除方法來(lái)實(shí)現(xiàn)。刪除按鈕可以在拼裝JSON字串的時(shí)候，賦值給OPERATION域，這樣設(shè)置{field:'OPERATION',title:'操作',width:120}，就可以在頁(yè)面上顯示刪除按鈕了。刪除的實(shí)現(xiàn)，如下：

function DelAff(){

$.messager.confirm('確認(rèn)','是否真的刪除?',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     

);

}

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

4.待解決的問(wèn)題

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

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