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);
}
}

　　}
　　},
　　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);

秒客网

EasyUi datagrid 表格分页例子

相关文章