easyui datagrid实现前台和后台的动态分页
2014-01-05 19:14阅读：
easyui提供的datagrid实现了对应的前台一次分页，对于后台分页还是比较简单的，毕竟每次点击分页按钮的时候提供了对应的两个参数，然后根据对应action获取对应的数据进行对应的显示，他的两个参数
pageNumber,pageSize是存在浏览器参数中的，可以通过response进行获取，
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType('application/json');
前台分页，前台分页只要是改了easyui自己的pagefiter方法，通过pager.pagination({
onSelectPage:function(pageNum, pageSize){
opts.pageNumber = pageNum;
opts.pageSize = pageSize;
pager.pagination('refresh',{
pageNumber:pageNum,
pageSize:pageSize
});
dg.datagrid('loadData',getDataFenYe(pageNum,pageSize));
}
});
中的pageNum, pageSize设置当前需要显示的数据
//
var
strList = {};
//
function
getDataFenYe(pageNumber,pageSize){
//
var start =
pageNumber * pageSize;
//
var end =
pageNumber * pageSize+ pageSize;
//
var tt =
{};
//
var rows =
[];
//
for(var i=start;
i<=end; i++){
//
var amount = Math.floor(Math.random()*1000);
//
var price = Math.floor(Math.random()*1000);
//
rows.push({
//
inv: 'Inv No '+i,
//
date:
$.fn.datebox.defaults.formatter(new Date()),
//
name: 'Name '+i,
//
amount: amount,
//
price: price,
//
cost: amount*price,
//
note: 'Note '+i
//
});
//
}
//
tt =
{total:800,rows:rows};
//
return tt;
//
}
//
function pagerFilter(data){
//
data =
strList;
//
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',getDataFenYe(pageNum,pageSize));
//
}
//
});
//
data = getDataFenYe(opts.pageNumber
,opts.pageSize);
//
data.originalRows = (data.rows);
//
return data;
//
}
//
function getData(){
//
var rows =
[];
//
var tt =
[];
//
for(var i=1;
i<=800; i++){
//
var amount = Math.floor(Math.random()*1000);
//
var price = Math.floor(Math.random()*1000);
//
if(i > 10 && i < 20 )
//
tt.push({
//
inv: 'Inv No '+i,
//
date:
$.fn.datebox.defaults.formatter(new Date()),
//
name: 'Name '+i,
//
amount: amount,
//
price: price,
//
cost: amount*price,
//
note: 'Note '+i
//
});
//
if( i < 10){
//
rows.push({
//
inv: 'Inv
No '+i,
//
date:
$.fn.datebox.defaults.formatter(new Date()),
//
name: 'Name
'+i,
//
amount:
amount,
//
price:
price,
//
cost:
amount*price,
//
note: 'Note
'+i
//
});
//
}
//
}
//
strList =
{
//
total: 800,
//
rows: tt
//
};
//
return
rows;
//
}
//
$(function(){
//
$('#dg').datagrid({loadFilter:pagerFilter}).datagrid('loadData',
getData());
//
});
利用后台分页主要代码如下：
-->
后台java代码：public void list() throws Exception{
HttpServletRequest
request = ServletActionContext.getRequest();
int page =
Integer.parseInt(request.getParameter('page'));
int limit =
Integer.parseInt(request.getParameter('rows'));
Map maps = new
HashMap();
maps.put('total',
mapserviceConfig.count());
maps.put('rows',
mapserviceConfig.pageList((page - 1) * limit, limit));
try {
HttpServletResponse response =
ServletActionContext.getResponse();
response.setContentType('application/json');
response.setCharacterEncoding('utf-8');
PrintWriter writer = response.getWriter();
writer.write(JsonMapper.getMapper().writeValueAsString(maps));
writer.close();
} catch
(IOException e) {
e.printStackTrace();
}
}
