快捷導(dǎo)航

EasyUI?Pagination如何實(shí)現(xiàn)分頁(yè)功能getPager

更新時(shí)間：2023年04月23日 10:22:28 作者：趙曉霞

這篇文章主要介紹了EasyUI?Pagination如何實(shí)現(xiàn)分頁(yè)功能getPager問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

EasyUI Pagination實(shí)現(xiàn)分頁(yè)功能getPager

查看了一邊EasyUI 官網(wǎng)對(duì)于分頁(yè)功能的編寫，剛開始使用easyui時(shí)發(fā)現(xiàn)其中有很多自己不理解的地方，還好幫我們做了很多函數(shù)的封裝，供我們直接調(diào)用就可以了，更好的使用在網(wǎng)頁(yè)中，對(duì)于新手更是很好理解。

便于操作和更改，下面我們對(duì)于分頁(yè)做一次詳細(xì)的解剖，在工作中遇到各種坑，發(fā)現(xiàn)一套完整的功能講解，并獻(xiàn)上代碼，以供各位指正。

1.第一步通過標(biāo)記創(chuàng)建分頁(yè)（pagination）data-options里面的內(nèi)容可參考官網(wǎng)的API根據(jù)需要添加。

<table id="recordDatagrid" class="easyui-datagrid" style="width: 100%; height: 500px"
? ? data-options="
? ? fitColumns:true,
? ? autoRowHeight:false,
? ? pagination:true,
? ? singleSelect:true,
? ? nowrap:false,
? ? showRefresh:false,
? ? striped:true,
? ? rownumbers:true">
? ? <thead>
? ? ? ? <tr>
? ? ? ? <th data-options="field:'number'" ?sortable="true" style="width: 14%">AI智能</th>
? ? ? ? </tr>
? ? </thead>
</table>

2.第二步使用 javascript 創(chuàng)建分頁(yè)（pagination）。

$(function($) {getPager_DataGrid('recordDatagrid');//獲取table分頁(yè)的id
initDataTables(1,10,"y");});//頁(yè)面進(jìn)入就執(zhí)行//回調(diào)函數(shù)

3.第三步使用處理ajax請(qǐng)求回來的數(shù)據(jù)操作如下。

function initDataTables(pageNumber, pageSize,isNew) {$.ajax({
? ? type: "get",
? ? dataType: "json",
? ? data:"&pageNumber="+ pageNumber
? ? +"&pageSize="+ pageSize,//傳頁(yè)數(shù)
? ? url: '/storeManageController/list',//填寫地址
beforeSend:function(){//數(shù)據(jù)傳輸中顯示框
? ? $.messager.progress({
? ? ? ? title:'請(qǐng)稍等',
? ? ? ? interval:50,
? ? ? ? text:'數(shù)據(jù)加載中...'
? ? });
},
success: function(json){
? ? //console.log("json"+JSON.stringify(json));
? ? $('#recordDatagrid').datagrid('loadData', json);?? ??? ??? ??
? ? if(isNew == "y"){//獲取第一頁(yè)，頁(yè)面刷新時(shí)顯示第一頁(yè)內(nèi)容
? ? ? ? var p = $('#recordDatagrid').datagrid('getPager');?? ?
? ? ? ? $(p).pagination({
? ? ? ? ? ? pageNumber:1
? ? });
}
? ? $.messager.progress('close');//顯示框關(guān)閉
? ? },
error: function(XMLHttpRequest, textStatus, errorThrown){
? ? ?$.messager.progress('close');
}
});});

4.第四步使用，這里從ajax傳回的數(shù)據(jù)處理完之后，頁(yè)面顯示的分頁(yè)此時(shí)是英文顯示，我們還需要做一步處理，easyui已經(jīng)幫我們做好了封裝的函數(shù)，這一步直接粘貼復(fù)制就可以了，對(duì)應(yīng)好table的id的名字。

function getPager_DataGrid(datagridID){//這里我們要對(duì)照第二步的函數(shù)名一致
? ? var p = $('#'+datagridID+'').datagrid('getPager');
? ? $(p).pagination({
? ? ? ? pageSize:10,
? ? ? ? pageList:[10,30,50],
? ? ? ? beforePageText:'第',
? ? ? ? afterPageText:'頁(yè) ?? ?共{pages}頁(yè)',
? ? ? ? displayMsg:'當(dāng)前顯示{from} - {to}條記錄?? ?共{total}條記錄',
? ? ? ? onSelectPage:function(pageNumber, pageSize){
? ? ? ? ? ? initDataTables(pageNumber, pageSize, "n");//我們回調(diào)函數(shù)，通過ajax請(qǐng)求，返回參數(shù)
? ? ? ? }
? ? });
}

這就是全部的代碼，希望你們能夠看懂

easyui控件，如何使用分頁(yè)功能

//定義兩個(gè)全局變量,用于存放最新的pageSize和pageNumber，在datagrid加載完畢函數(shù)中，捕捉列表頁(yè)各種動(dòng)作并記錄當(dāng)前頁(yè)和頁(yè)面條數(shù)

//根據(jù)新的頁(yè)碼和頁(yè)面條數(shù)，刷新數(shù)據(jù)

var dgPageNumber=1;//初始頁(yè)碼
var dgPageSize=10;//初始頁(yè)記錄數(shù)
$("#dg").datagrid({
pagination:true,
pageNumber:dgPageNumber,
pageSize:dgPageSize,
onLoadSuccess:function(data){
$("#dg").datagrid('getPager').pagination({
onRefresh:function(pageNumber,pageSize){
dgPageNumber=pageNumber;
dgPageSize=pageSize;
$("#dg").datagrid({
pageNumber:pageNumber,
pageSize:pageSize
});
//頁(yè)碼刷新后，數(shù)據(jù)要刷新，重新根據(jù)新頁(yè)碼查詢數(shù)據(jù)
//loadData()
},
onChangePageSize:function(pageSize){
dgPageSize=pageSize;
$("#dg").datagrid({
pageNumber:dgPageNumber,
pageSize:pageSize
});
//頁(yè)面承載條數(shù)改變，數(shù)據(jù)也要刷新
//loadData()
},
onSelectPage:function(pageNumber,pageSize){
dgPageNumber=pageNumber;
dgPageSize=pageSize;
$("#dg").datagrid({
pageNumber:pageNumber,
pageSize:pageSize
});
//頁(yè)碼改變，數(shù)據(jù)也要刷新
//loadData()
}
})
}
})