EasyUi datagrid 实现表格分页
1.首先引入easyui的css和js文件
2.前台需要写的js
//源数据
functionAsync(action,args,callback){
$.ajax({
url:action,
type:"POST",
dataType:"json",
timeout:10000,
data:args,
success:function(data){
if(callback){
callback(data);
}
}
});
}
//绑定数据并设置分页
functionBingData(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(){
varobj={};
$.each(this.serializeArray(),function(i,o){
varn=o.name,v=o.value;
obj[n]=obj[n]===undefined?v
:$.isArray(obj[n])?obj[n].concat(v)
:[obj[n],v];
});
returnJSON.stringify(obj);
};
//宽度
functionfixWidth(percent){
returndocument.body.clientWidth*percent;
}
//结束编辑
functionendEdit(vid){
vid="#"+vid;
vartb=$(vid);
varrows=tb.datagrid('getRows');
for(vari=0;i<rows.length;i++){
tb.datagrid('endEdit',i);
}
}
functionGetData(obj){
varurl=contextPath+'/fundRetreatVoucher/fundBatchRetreatVoucherQuery.htm';//action路径
varargs={};
args.pageIndex=1;//页索引
args.pageSize=10;//页容量
if(obj!=null){ //表单序列化的对象
args.obj=obj;
}
BingData("#tab",args,url,null);
}
functiongetTab(){
GetData();
vartb=$('#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){
varvcode=row.retreatBatchCode;
vare='<ahref="#"onclick="toDetail('+index+')">详情</a>|';
vard='<ahref="#"onclick="auditBatch('+index+',0)">审核通过</a>|';
varf='<ahref="#"onclick="auditBatch('+index+',1)">审核拒绝</a>';
returne+d+f;
}}
]],
onLoadSuccess:function(data){
if(data.total==0){
}
},
pagination:true,
pageIndex:1,//页索引
pageSize:10,//页容量
pageList:[10,15,20]
})
}
2后台
intcurrentPage=request.getParameter("pageIndex")==null?1:Integer.parseInt(request.getParameter("pageIndex"));
//每页行数
intshowCount=request.getParameter("pageSize")==null?10:Integer.parseInt(request.getParameter("pageSize"));
//分页实体
Stringobj=request.getParameter("obj");
if(StringUtils.notBlank(obj)){
fundRetreatVoucher=JsonUtils.toObject(obj,FundRetreatVoucherParam.class);//表单序列化json对象转为实体
}
out=response.getWriter();
List<FundRetreatVoucher>frvs=fundRetreatVoucherService.findAllFundRetreatVoucher(page,fundRetreatVoucher);
inttotal=fundRetreatVoucherService.findAllFundRetreatVoucher(getTotal(),fundRetreatVoucher).size();//数据大小
JSONObjectjson=newJSONObject();
json.put("list",frvs);//数据，这里的put的key,一定要为list，如果改了需要把BingData中的数据改一下
json.put("size",total);
out.print(json);