EasyUI easyui-datagrid分页功能实现

$('#dg_query').datagrid({
toolbar:toolbar,
loadMsg:'数据加载中....',
columns:[[
{field:'ckSelect',title:'选择',width:50,checkbox:true},
{field:'WBSH',title:'发货方',width:120,align:'left', sortable:true},
{field:'APPLY_TIME',title:'申请时间',width:70,align:'left', sortable:true},
{field:'WBWAYBILLID',title:'确认号',width:120,align:'left', sortable:true},
{field:'WBAPPSTATE',title:'WBAPPSTATE',hidden:true},
{field:'APL_STAT',title:'申请状态',width:60,align:'left', sortable:true},
{field:'WBCHKSTATE',title:'WBCHKSTATE',hidden:true},
{field:'CHK_STAT',title:'确认状态',width:60,align:'left', sortable:true, styler:cellStyler},
{field:'WBUPLSTATE',title:'WBUPLSTATE',hidden:true},
{field:'UPL_STAT',title:'上传标记',width:60,align:'left', sortable:true},
{field:'WBCHKUPLST',title:'WBCHKUPLST',hidden:true},
{field:'UPLCHK_STAT',title:'保函<br/>审核状态',width:60,align:'left', sortable:true, styler:cellStyler},
{field:'HAVE_DAY',title:'有效期<br/>天数还有',width:70,align:'left', sortable:true},
{field:'BEG_TIME',title:'有效期<br/>起始时间',width:70,align:'left', sortable:true},
{field:'END_TIME',title:'有效期<br/>结束时间',width:70,align:'left', sortable:true},
{field:'WBLDNM',title:'起运港口',width:70,align:'left', sortable:true},
{field:'POD_PORT',title:'卸货港口',width:120,align:'left', sortable:true},
{field:'WBCONTRACT',title:'合约号',width:70,align:'left', sortable:true},
{field:'WBIVLD',title:'WBIVLD',hidden:true},
{field:'DEL_STAT',title:'是否删除',width:70,align:'left', sortable:true},
{field:'WBKEY',title:'WBKEY',hidden:true}
]],
border: true,
nowrap: false,
fit: true,
fitColumns: false,
//striped: true,
singleSelect: true,
remoteSort: false,

98f6
rownumbers: true,
pagination: true,
pageSize: 10,
pageList: [10,20,50,100,200],
loadFilter: pagerFilter,
rowStyler: function(index, row) {
if ($.trim(row.WBIVLD) != '') {
return 'color:#ff0000';
} else if ($.trim(row.WBCHKSTATE) == 'C' && $.trim(row.WBCHKUPLST) == 'C') {
return 'background-color:#c4e1ff';
}
}
});
function cellStyler(value, row, index) {
if ($.trim(value) == '已拒绝') {
return 'color:#ff0000';
}
}

//分页功能
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) {
if(data.rows)
data.originalRows = (data.rows);
else if(data.data && data.data.rows)
data.originalRows = (data.data.rows);
else
data.originalRows = [];
}
var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);
var end = start + parseInt(opts.pageSize);
data.rows = (data.originalRows.slice(start, end));
return data;
}