這篇文章主要用實(shí)例解析easyUI如何使用分頁過濾器對(duì)數(shù)據(jù)進(jìn)行分頁操作,內(nèi)容簡而易懂,希望大家可以學(xué)習(xí)一下,學(xué)習(xí)完之后肯定會(huì)有收獲的,下面讓小編帶大家一起來看看吧。
目前創(chuàng)新互聯(lián)建站已為上千的企業(yè)提供了網(wǎng)站建設(shè)、域名、雅安服務(wù)器托管、網(wǎng)站改版維護(hù)、企業(yè)網(wǎng)站設(shè)計(jì)、凱里網(wǎng)站維護(hù)等服務(wù),公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略,正道將秉承"和諧、參與、激情"的文化,與客戶和合作伙伴齊心協(xié)力一起成長,共同發(fā)展。
在后臺(tái)管理系統(tǒng)中,由于數(shù)據(jù)量的龐大,我們經(jīng)常需要用到easyui框架的分頁工具。在本文章中,使用了分頁過濾器進(jìn)行分頁的方法,示例如下:

代碼如下:
HTML
<table id="wu-datagrid-stuInfo" class="easyui-datagrid" toolbar="#wu-toolbar-stuInfo"> </table>
JS代碼
/**
* 獲取所有學(xué)員信息
*/
function show() {
$.ajax({
url: httpurl + '/jsrAdminWeb/selectAll',//連接后臺(tái)接口
type: 'post',
dataType: 'json',
contentType: "application/json",
async: false, //false 同步
success: function (result) {
var stuData = result.data;
getData();//鋪頁面(列)
$("#wu-datagrid-stuInfo").datagrid("loadData", stuData);//加載數(shù)據(jù)表格
}
});
}
/**
* 前臺(tái)鋪值
*/
function getData() {
$("#wu-datagrid-stuInfo").datagrid({
loadFilter: pagerFilter,//調(diào)用分頁過濾器方法
checkOnSelect: true,//當(dāng)用戶點(diǎn)擊行的時(shí)候該復(fù)選框就會(huì)被選中或取消選中
autoRowHeight: false,//自定義設(shè)置行的高度,根據(jù)該行的內(nèi)容
rownumbers: true,//顯示一個(gè)行號(hào)列
singleSelect: false,//可以一次選擇多行
// multiSort: true,//允許多列排序
fit: true,
columns: [[{
field: 'id', //每一列的名字
width: '50',
title: 'ID',
checkbox: true
}, {
field: 'stuName',
title: '姓名',
width: '100',
align: 'center'
}, {
field: 'stuSex',
title: '性別',
width: '100',
align: 'center'
}, {
field: 'stuAge',
title: '年齡',
width: '100',
align: 'center'
}, {
field: 'stuIntroduce',
title: '介紹',
width: '700',
align: 'center'
}, {
field: 'createTime',
title: '創(chuàng)建時(shí)間',
width: '130',
align: 'center'
}
]],
idField: 'id',
loadMsg: 'Processing, please wait …',
pagination: true//將分頁設(shè)置為true
});
}分頁過濾器方法(寫在js代碼中):
注意:從后臺(tái)取到的數(shù)據(jù)是全部的學(xué)生信息,這段代碼,復(fù)制到JS代碼里面就可以實(shí)現(xiàn)。
/**
* 分頁過濾器
* @param data 全部數(shù)據(jù)
* @returns {*}
*/
function pagerFilter(data) {
if (typeof data.length == 'number' && typeof data.splice == 'function') {// is array
data = {
total: data.length,
rows: data
}
}
var dg = $(this);
var opts = dg.datagrid('options');
var pager = dg.datagrid('getPager');
pager.pagination({
onSelectPage: function (pageNum, pageSize) {
opts.pageNumber = pageNum;
opts.pageSize = pageSize;
pager.pagination('refresh', {pageNumber: pageNum, pageSize: pageSize});
dg.datagrid('loadData', data);
}
});
if (!data.originalRows) {
data.originalRows = (data.rows);
}
var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);
var end = start + parseInt(opts.pageSize);
data.rows = (data.originalRows.slice(start, end));
return data;
}以上就是關(guān)于用實(shí)例解析easyUI如何使用分頁過濾器對(duì)數(shù)據(jù)進(jìn)行分頁操作的內(nèi)容,如果你們有學(xué)習(xí)到知識(shí)或者技能,可以把它分享出去讓更多的人看到。
本文題目:用實(shí)例解析easyUI如何使用分頁過濾器對(duì)數(shù)據(jù)進(jìn)行分頁操作
轉(zhuǎn)載注明:http://chinadenli.net/article14/pgpgge.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站建設(shè)、Google、面包屑導(dǎo)航、微信小程序、企業(yè)網(wǎng)站制作、用戶體驗(yàn)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)