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:'保函
审核状态',width:60,align:'left', sortable:true, styler:cellStyler},   
                        {field:'HAVE_DAY',title:'有效期
天数还有',width:70,align:'left', sortable:true},                        
                        {field:'BEG_TIME',title:'有效期
起始时间',width:70,align:'left', sortable:true}, 
                        {field:'END_TIME',title:'有效期
结束时间',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,
                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;
            }