前台分页是easyui自带的功能,用法比较简单,写一个pagerFilter函数,在加载数据的时候加到datagrid后面就可以了。
pagerFilter函数如下:
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);
}
});
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;
}
引用方式:
$('#dg').datagrid({
//其他代码......
}).datagrid({loadFilter:pagerFilter});
$('#dg').datagrid({loadFilter:pagerFilter}).datagrid({...})那么将出现,重新加载数据时可能需要加载2次,从而,数据量多的会覆盖数据量少的。