这篇文章主要用实例解析easyUI如何使用分页过滤器对数据进行分页操作，内容简而易懂，希望大家可以学习一下，学习完之后肯定会有收获的，下面让小编带大家一起来看看吧。
在后台管理系统中，由于数据量的庞大，我们经常需要用到easyui框架的分页工具。在本文章中，使用了分页过滤器进行分页的方法，示例如下：
代码如下：
HTML
<table id="wu-datagrid-stuInfo" class="easyui-datagrid" toolbar="#wu-toolbar-stuInfo"> </table>
JS代码
/**
* 获取所有学员信息
*/
function show() {
$.ajax({
url: httpurl + '/jsrAdminWeb/selectAll',//连接后台接口
type: 'post',
dataType: 'json',
contentType: "application/json",
async: false, //false 同步
success: function (result) {
var stuData = result.data;
getData();//铺页面（列）
$("#wu-datagrid-stuInfo").datagrid("loadData", stuData);//加载数据表格
}
});
}
/**
* 前台铺值
*/
function getData() {
$("#wu-datagrid-stuInfo").datagrid({
loadFilter: pagerFilter,//调用分页过滤器方法
checkOnSelect: true,//当用户点击行的时候该复选框就会被选中或取消选中
autoRowHeight: false,//自定义设置行的高度，根据该行的内容
rownumbers: true,//显示一个行号列
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: '创建时间',
width: '130',
align: 'center'
}
]],
idField: 'id',
loadMsg: 'Processing, please wait …',
pagination: true//将分页设置为true
});
}分页过滤器方法（写在js代码中）：
注意：从后台取到的数据是全部的学生信息，这段代码，复制到JS代码里面就可以实现。
/**
* 分页过滤器
* @param data 全部数据
* @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;
}以上就是关于用实例解析easyUI如何使用分页过滤器对数据进行分页操作的内容，如果你们有学习到知识或者技能，可以把它分享出去让更多的人看到。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
