jQuery EasyUI 数据网格 - 自定义分页
jQuery EasyUI 数据网格 - 自定义分页
概述
jQuery EasyUI 是一个强大的JavaScript UI工具包，其数据网格提供了丰富的功能，如分页、排序、过滤、编辑，可以方便地对表格数据进行处理。其中自定义分页能够快速地处理大量的数据，提供了许多强大的功能，例如按照筛选条件进行分页，按照排序条件进行分页等。
实现
在jQuery EasyUI中，实现自定义分页功能的关键就是按照筛选条件或排序条件重新加载表格数据，同时设置新的分页参数。
- 定义自定义分页器。
$('#dg').datagrid({
pagination: true,
pageSize: 10,
pageList: [10,20,30,40,50],
loadFilter: pagerFilter, // 自定义分页器
columns: [[
...
]]
});
loadFilter属性是多页处理函数，可以自定义为任何希望将表格数据返回的函数，实现筛选、排序、分页等逻辑。
- 实现自定义分页器函数。
function pagerFilter(data){
if (typeof data.length == 'number' && typeof data.splice == 'function'){ // 是数组
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);
}
});
var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
var end = start + parseInt(opts.pageSize);
return {total:data.total,rows:data.rows.slice(start,end)};
}
首先对传入的参数进行判断，如果是数组类型则包装成符合要求的数据格式，即{total: 数据长度, rows: 数据数组}。
然后获取datagrid的配置和分页器对象，并设置onSelectPage事件的函数。在页面选择页码时，重新加载表格数据并设置新的分页参数。
最后，计算当前页码所需的数据条目范围，返回修剪后适用于整页的分页数据。
- 接受过滤器结果并重新加载表格数据。
在页面上调用过滤函数获取符合要求的数据，然后调用loadData方法重新加载表格数据。
function doSearch(){
var queryParams = $("#searchForm").serializeArray();
var queryData = {};
$.each(queryParams, function(i, param){
queryData[param.name] = param.value;
});
$.post("url", queryData, function(res){
$('#dg').datagrid('loadData', res);
});
}
总结
自定义分页器可以定制非常个性化的分页系统，提高大量数据的读写效率。jQuery EasyUI提供了完美的接口和组件，可以帮助我们实现一个优秀的分页器，并为我们的网站或系统带来更高的性能和效率。