EasyUI datagrid+SpringMVC+MyBatis实现分页查询

前面需导入：

<link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.3/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.3/themes/icon.css">
<link rel="s
a864
tylesheet" type="text/css" href="jquery-easyui-1.5.3/demo/demo.css">
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.5.3/jquery.easyui.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.5.3/plugins/jquery.datagrid.js"></script>
<script type="text/javascript" src="jquery-easyui-1.5.3/locale/easyui-lang-zh_CN.js"></script>

注意：之前导入的是jquery-3.2.1.min.js出现datagrid的table中的属性

rownumbers: true,//查询结果在表格中显示行号

显示NaN而不是数字，导入1.8.3就好了。
前端页面：        <div id="toolbar">
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="add()">添加</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroy()">删除</a>
</div>

<table id="table" class="easyui-datagrid">
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>牛肉</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>羊肉</td>
</tr>
</tbody>
</table>交互的JavaScript：

<script type="text/javascript">

$(function(){
             page_init();
});
function page_init(){
     $('#table').datagrid({
                 title:"分页",
toolbar: '#toolbar',
queryParams:{pageNumber:1,pageSize:10},//查询参数
rownumbers: true,//查询结果在表格中显示行号
fit: true,
url: "XXX",//请求地址
idField: "food_id",
loadMsg:'数据加载中...',
fitColumns: true,//列的宽度填满表格，防止下方出现滚动条。
singleSelect:false,
checkOnSelect: true,
frozenColumns: [[
{title: "复选框",field: "index",  checkbox:true},//复选框
{title: "XXX", field: "XXX", width: "20%"},
{title: "XXX", field: "XXX", width: "20%"},
{title: "XXX", field: "XXX", width: "20%",
formatter: function (val, row, index) {
return '<a href="#" onclick="editData(" + index + ")">XXX</a>';
}
},
{title: "XXX", field: "XXX", width: "20%", align: "center", halign: "center",
formatter: function (val, row, index) {
return '<a href="#" onclick="editData(" + index + ")">XXX</a>';
}
},
{ title: "操作", field: "operation", width: "20%", align: "center", halign: "center",
formatter: function (val, row, index) {
return '<a href="#" onclick="editData(" + index + ")">修改</a> 
                                            <a href="#" onclick="deleteData(" + index + ")">删除</a>'
}
}
]],
pagination: true,//分页控件
// pageNumber:1, //初始页码，得在这设置才效果，pagination设置没效果。
/* pageSize: 2000,
pageList: [5,10,15,20],
showPageList: true */
//如果后端返回的json的格式直接是data={total:xx,rows:{xx}},不需要设置loadFilter了，
//如果有多层封装，比如data.jsonMap = {total:xx,rows:{xx}}，则需要在loadFilter处理一下。
/* loadFilter: function(data){
if(data.jsonMap) {
return data.jsonMap;
}
}  */

})

var p = $('#table').datagrid('getPager');
$(p).pagination({
pageSize: 10,//每页显示的记录条数，默认为10
pageList: [5,10,15,20],//可以设置每页记录条数的列表
beforePageText: '第',//页数文本框前显示的汉字
afterPageText: '页    共 {pages} 页',
displayMsg: '共 {total} 条记录',
onSelectPage: function (pageNumber, pageSize) {//分页触发
//alert("pageNumber="+pageNumber+";pageSize="+pageSize);
find(pageNumber, pageSize);
}
});

}

function find(pageNumber, pageSize){
console.log(111);
$("#table").datagrid('getPager').pagination({pageNumber:pageNumber, pageSize:pageSize});//重置
$("#table").datagrid("loading"); //加屏蔽,为 pagination 的 onSelectPage 事件创建了一个时间处理器
$.ajax({
type : "POST",
dataType : "json",
url : "XXX",//请求地址
data : {
pageNumber : pageNumber,
pageSize : pageSize
},
success : function(data) {
$("#table").datagrid('loadData',data);
$("#table").datagrid("loaded"); //移除屏蔽
},
error : function(err) {
$.messager.alert('操作提示', '获取信息失败...请联系管理员!', 'error');
$("#table").datagrid("loaded"); //移除屏蔽
}
});

}

</script>

后台MVC

controller： /*
* 分页查询
* page：第几页
* rows：每页行数
*/
@RequestMapping(value="/XXX",produces="application/json;charset=UTF-8")
@ResponseBody//转成JSON
public Object findByPage(@RequestParam(value="pageNumber",required=false)Integer pageNumber,@RequestParam(value="pageSize",required=false)Integer pageSize){
System.out.println(pageNumber+"----"+pageSize);
AppResult appResult = new AppResult();
if(pageNumber!=null && pageSize!=null){
appResult = foodService.findByPage(pageNumber,pageSize);
System.out.println(appResult.getMessage());
}
return appResult.getData();

}Service实现层:public AppResult findByPage(Integer pageNumber, Integer pageSize) {
Map<String, Object> jsonMap = new HashMap<String, Object>();//定义返回的map
AppResult appResult = new AppResult();
Integer total = foodDao.findFoodTotal();//需要返回
Integer startRow = (pageNumber-1)*pageSize;
Map<String,Object> map = new HashMap<String,Object>();
                //获取分页查询的参数
                map.put("startRow", startRow);
map.put("pageSize", pageSize);
List<XXX> list = dao.findByPage(map);
// 返回到前台的值必须按照如下的格式包括 total and rows
jsonMap.put("total", total==null ? 0:total);//total键 存放总记录数
jsonMap.put("rows", list);//rows键 存放每页记录 list
appResult.setData(jsonMap);
appResult.setStatus(1);
appResult.setMessage("分页获取成功");
return appResult;
}Mapper文件：<select id="findByPage" parameterType="map" resultType="Food">
select XXX from items_info limit #{startRow},#{pageSize}
</select>

<select id="findFoodTotal" resultType="int">
select count(*) from items_info
</select>这样easyui的datagrid的分页就搞定了。。。
参考资料：https://www.cnblogs.com/cocoat/p/4903481.html