这里说明的是将说有数据先返回到前端再由前端去分页，性能可能没有先在后台分好页再返回给前端高
但如果操作不涉及大数据的话也没什么大问题，具体问题具体分析
要使用分页控件首先要声明初始化一下：
//设置分页控件
var p = $("#tt").datagrid('getPager'); //tt为表格id
$(p).pagination({
// pageSize: 10,//每页显示的记录条数，默认为10
pageList: [5,10,15],//可以设置每页记录条数的列表
beforePageText: '第',//页数文本框前显示的汉字
afterPageText: '页 共 {pages} 页',
displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条记录',
});
然后是前端的分页代码（网上的）：
function pagerFilter(data){
if (typeof data.length == 'number' && typeof data.splice == 'function'){ // is array
data = {
total: data.length,
rows: data
}
}
var dg = $(this);
var opts = dg.datagrid('options');
var pager = dg.datagrid('getPager');
pager.pagination({
//pageSize: 10,//每页显示的记录条数，默认为10 //这里不设置的画分页页数选择函数会正确调用，否则每次点击下一页
pageList: [5,10,15],//可以设置每页记录条数的列表 //pageSize都会变回设置的值
beforePageText: '第',//页数文本框前显示的汉字
afterPageText: '页 共 {pages} 页',
displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条记录',
onChangePageSize:function(){
},
onSelectPage:function(pageNum, pageSize){
opts.pageNumber = pageNum;
opts.pageSize = pageSize;
pager.pagination('refresh',{
pageNumber:pageNum,
pageSize:pageSize
});
dg.datagrid('loadData',data);
}
});
if (!data.originalRows){
data.originalRows = (data.rows);
}
var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
var end = start + parseInt(opts.pageSize);
data.rows = (data.originalRows.slice(start, end));
return data;
}
function doSearch(){
userName = $("#itemid").val();
roleName = $("#roleName").val();
var urlRequest="/account/searchByUserName?userName="+userName+"&roleName=" + roleName; //相对路径请求
$.getJSON(urlRequest, null, function(json) { //get方法获取json数据，java代码之前写过一篇了
/* $(function(){
ccb={total:json.length,rows:[json[0]]};
$("#tt").datagrid('loadData', ccb);
alert('here');
}); */
ccb = { //Json数据继续封装
"total": json.length,
"rows": json
};
$(function(){
$('#tt').datagrid({loadFilter:pagerFilter}).datagrid('loadData', ccb);
});
/* $("#tt").datagrid('loadData', { //加载数据类似上面的
"total": json.length,
"rows": json
}); */
});
}
Html代码顺便粘一下：
<body>
<div class="demo-info" style="margin-bottom:10px">
<div class="demo-tip icon-tip"> </div>
<div>输入查询关键字，点击查询搜索</div>
</div> <table id="tt" class="easyui-datagrid" style="width:1130px;height:540px"
title="Searching" iconCls="icon-search" toolbar="#tb"
rownumbers="true" pagination="true">
<thead>
<tr>
<th field="userName" width="150">用户名</th>
<th field="roleName" width="150">角色名</th>
<th field="telphone" width=150" >电话</th>
<th field="email" width="150" >邮件</th>
<th field="sex" width="50">性别</th>
<th field="createtime" width="160" align="center">账户创建时间</th>
</tr>
</thead>
</table>
<div id="tb" style="padding:3px">
<span>用户名:</span>
<input id="itemid" style="line-height:26px;border:1px solid #ccc" onkeydown='if(event.keyCode==13){doSearch();}'>
<span>角色名:</span>
<select id="roleName" style="line-height:26px;border:1px solid #ccc" onchange="doSelect();">
<option value="all" >所有角色</option>
<option value="超级管理员">超级管理员</option>
<option value="管理员">管理员</option>
</select>
<a href="#" class="easyui-linkbutton" plain="true" onclick="doSearch()">查询</a>
</div>
</body>