EasyUi datagrid 实现表格分页

1.首先引入 easyui的 css 和 js 文件
2.前台需要写的js
复制代码代码如下:
//源数据
function Async（action,args,callback）{
$.ajax（{
url: action ,
type:"POST",
dataType:"json",
timeout: 10000,
data: args,
success: function（data）{
if（callback）{
callback（data）;
}
}
}）;
}
//绑定数据并设置分页
function BingData（pid,args,action,callback）{
Async（action,args,function（data）{
if（data！=null&&data.list！=null）{
var _dataCount=data.size;//总条数
var _data=data.list;//数据
if（callback）{
callback（_data）;
}
$（pid）.datagrid（"loadData", _data）;
$（pid）.datagrid（"getPager"）.pagination（{
beforePageText: "第",
afterPageText: "页共 {pages} 页",
displayMsg: "当前显示 {from} - {to} 条记录共 {total} 条记录",
pageSize: args.pageSize,
total: _dataCount,
pageNumber: args.pageIndex,
pageList:args.pageList,
onSelectPage: function （pageNumber, pageSize） {
args.pageIndex = pageNumber;
args.pageSize = pageSize;
BingData（pid, args, action,null）;
},
onRefresh: function （pageNumber, pageSize） {
args.pageIndex = pageNumber;
args.pageSize = pageSize;
BingData（pid, args, action,null）;
}
}）;
}
}）;
}
//表单序列化为对象
$.fn.serializeObject = function（）{
var obj = {};
$.each（ this.serializeArray（）, function（i,o）{
var n = o.name, v = o.value;
obj[n] = obj[n] === undefined ? v
: $.isArray（ obj[n] ） ? obj[n].concat（ v ）
: [ obj[n], v ];
}）;
return JSON.stringify（obj）;
};
//宽度
function fixWidth（percent）{
return document.body.clientWidth * percent ;
}
//结束编辑
function endEdit（vid）{
vid = "#"+vid;
var tb=$（vid）;
var rows = tb.datagrid（"getRows"）;
for （ var i = 0; i < rows.length; i++） {
tb.datagrid（"endEdit", i）;
}
}
function GetData（obj）{
var url = contextPath+"/fundRetreatVoucher/fundBatchRetreatVoucherQuery.htm";//action路径
var args={};
args.pageIndex=1;//页索引
args.pageSize=10;//页容量
if（obj！=null）{ //表单序列化的对象
args.obj=obj;
}
BingData（"#tab",args,url,null）;
}
function getTab（）{
GetData（）;
var tb=$（"#tab"）;
tb.datagrid（{
title : "资金退回批次查询结果",
striped : true,
fitColumns: true, //自适应列的大小
rownumbers: true,
nowrap : true,//设置为true，当数据长度超出列宽时将会自动截取
striped : true,
width:fixWidth（0.99）,
height:"430",
singleSelect:true,
loadMsg : "数据装载中......",
columns:[[
{field:"interfaceInfoCode",title:"资金通道编码",width:fixWidth（0.3）,align: "center"},
         {field:"retreatBatchCode",title:"资金退回批次号",width:fixWidth（0.2）,editor:"text" ,align: "center"},
         {field:"total",title:"总笔数",width:fixWidth（0.1）,align:"right",editor:"text" ,align: "center"},
{field:"totalMoney",title:"总金额",width:fixWidth（0.1）,align:"right",editor:"text" ,align: "center"},
          {field:"def2",title:"操作",width:fixWidth（0.3）,editor:"text",align:"right" ,align: "center",
formatter:function（value,row,index）{
var vcode =row.retreatBatchCode;
var e = "<a href="#" onclick="toDetail（"+index+"）">详情</a> | ";
var d = "<a href="#" onclick="auditBatch（"+index+",0）">审核通过</a> | ";
var f = "<a href="#" onclick="auditBatch（"+index+",1）">审核拒绝</a> ";
return e+d+f;
}}
]],
onLoadSuccess:function（data）{
if （data.total == 0） {
}
},
pagination: true,
pageIndex:1,//页索引
pageSize:10,//页容量
pageList: [10,15,20]
}）
}

2 后台
复制代码代码如下:
int currentPage = request.getParameter（"pageIndex"） == null ? 1 : Integer.parseInt（request.getParameter（"pageIndex"））;
// 每页行数
int showCount = request.getParameter（"pageSize"） == null ? 10 : Integer.parseInt（request.getParameter（"pageSize"））;
// 分页实体
String obj = request.getParameter（"obj"）;
if （StringUtils.notBlank（obj）） {
   fundRetreatVoucher = JsonUtils.toObject（obj, FundRetreatVoucherParam.class）; //表单序列化json对象转为实体
}
out = response.getWriter（）;
List<FundRetreatVoucher> frvs = fundRetreatVoucherService.findAllFundRetreatVoucher（page, fundRetreatVoucher）;
int total = fundRetreatVoucherService.findAllFundRetreatVoucher（getTotal（）, fundRetreatVoucher）.size（）;//数据大小
JSONObject json = new JSONObject（）;
json.put（"list", frvs）;//数据，这里的put的key ,一定要为list，如果改了需要把 BingData中的数据改一下
json.put（"size", total）;
out.print（json）;