EasyUI实现分页的原理就是从前台获取当前页以及需要显示的记录条数传到后台,后台使用limit方式获取需要显示的数据和获取所有记录的数量传回前台显示。
前台js方法:
$('#test_datagrid').datagrid('loadData',{total:0,rows:[]});
$('#test_datagrid').datagrid({
height:"100%",
singleSelect:true,
url:"listServlet",
queryParams:{"startTime" : startTime,
"endTime" : endTime},
remoteSort:false,
rownumbers:true,
pagination:true,
fitColumns:false,
//scrollbarSize:10,
collapsible:true,
pageSize: 50,
toolbar:'#tb',
columns:[[
{field:'id',title:'编号',width:50,align:'center',sortable:true},
{field:'installDate',title:'安装日期',width:90,align:'center',sortable:true},
{field:'company',title:'公司',width:180,align:'center',sortable:true},
{field:'gender',title:'性别',width:50,align:'center',sortable:true},
{field:'idCard',title:'身份证号',width:90,align:'center',sortable:true},
{field:'phoneNum',title:'联系电话',width:75,align:'center',sortable:true},
{field:'updateTime',title:'修改时间',width:180,align:'center',sortable:true,
sorter:function(a,b){
a = a.split('/');
b = b.split('/');
if (a[2] == b[2]){
if (a[0] == b[0]){
return (a[1]>b[1]?1:-1);
} else {
return (a[0]>b[0]?1:-1);
}
} else {
return (a[2]>b[2]?1:-1);
}
}
}
]]
});
var p = $('#test_datagrid').datagrid('getPager');
$(p).pagination({
pageSize: 50,//每页显示的记录条数,默认为5
pageList: [50, 100, 200],//可以设置每页记录条数的列表
});
后台servlet方法:
//获取分页信息
int pageSize=0;
int rows=0;
pageSize=Integer.parseInt(request.getParameter("page"));
rows=Integer.parseInt(request.getParameter("rows"));
//获取总页数
int totalCount=0;
StatisticsalarmPstmt pstmt=new StatisticsalarmPstmt();
//获取分页数据
List<StatisticsalarmModel> list = pstmt.selectData(date, company, pageSize, rows);
//获取全部数据数量
totalCount=pstmt.selectDataCount(date, company);
//返回结果
Map<String, Object> jsonMap=new HashMap<String, Object>();
jsonMap.put("total", totalCount);
jsonMap.put("rows", list);
JSONObject result=JSONObject.fromObject(jsonMap);
out.println(result);
out.flush();
out.close();