Question

jquery easyui DataGrid 分页流程

最好有后台数据处理和前台设置

Answer 1

前台

//数据加载
$('#d').datagrid({
url:'list',
width: 1000,
height: 'auto',
nowrap:true,
toolbar:'#tb',
loadMsg:'数据加载中,请稍后...',
pageSize:20,
rownumbers:true,
pagination:true,
fit:true,
striped:true //交替显示行背景
});

//分页加载
$("#d").datagrid("getPager").pagination({
beforePageText: '第',
afterPageText: '页 共 {pages} 页',
pageList: [10,20,50,100],
displayMsg:"显示 {from} 到 {to} 条记录 , 共 {total} 条记录"
});

<table id="d" title="管理">
<thead>
<tr>
<th data-options="field:'id',checkbox:true"></th>
//field和数据库字段对应
<th data-options="field:'code',width:200,align:'left'">编号</th>
<th data-options="field:'name',width:130,align:'center'">名称</th>
</tr>
</thead>
</table>

后台：

//记录数
map.put("total", service.getTotal(map)); //获得总记录数
//设定分页,排序.方法在下面
setCommParameters(request, map);
//list代表显示的数据
List ilst=service.getList(map); //自己写个方法。要分页的方法。参数都在map里
map.put("rows", list);
ObjectMapper mapper = new ObjectMapper();
result=mapper.writeValueAsString(map); //result是字符串
/**
* 根据总记录计算出 分页条件起始页 记录总页数
*
* @param request
* @param map
*/
protected void setCommParameters(HttpServletRequest request, Map<String, Object> map){
//排序字段名称。
String sort=StringUtils.trimToNull(request.getParameter("sort"));
//排序顺序
String sortOrder=StringUtils.trimToNull(request.getParameter("order"));
//当前第几页
String page=request.getParameter("page");
//每页显示的记录数
String rows=request.getParameter("rows");
//当前页
int currentPage = Integer.parseInt((page == null || page == "0") ? "1":page);
//每页显示条数
int pageSize = Integer.parseInt((rows == null || rows == "0") ? "10":rows);
//每页的开始记录 第一页为1 第二页为number +1
int startRow = (currentPage-1)*pageSize;
map.put(START_ROW, startRow);
map.put(END_ROW, pageSize);
map.put("sortName", sort);
map.put("sortOrder", sortOrder);
}