本文实例讲述了easyUI使用分页过滤器对数据进行分页操作。分享给大家供大家参考，具体如下：在后台管理系统中，由于数据量的庞大，我们经常需要用到easyui框架的分页工具。在本文章中，使用了分页过滤器进行分页的方法，示例如下：代码如下：HTML







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

});
}


/**
* 获取所有学员信息
*/
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;
}


/**
* 分页过滤器
* @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使用分页过滤器实现前台数据分页的方法。如有错误，还望指正，谢谢。关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery切换特效与技巧总结》、《jQuery遍历算法与技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》jQuery扩展技巧总结jQuery常用插件及用法总结jQuery切换特效与技巧总结jQuery遍历算法与技巧总结jQuery常见经典特效汇总jQuery动画与特效用法总结jquery选择器用法总结希望本文所述对大家jQuery程序设计有所帮助。