首頁 > web前端 > js教程 > jquery easyui 分頁的使用教學實例

jquery easyui 分頁的使用教學實例

零下一度
發布: 2017-06-19 15:15:10
原創
1485 人瀏覽過

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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板