一、前端
1.EasyUI-datagrid使用十分简单,首先在我面使用的页面加上table标签(此处默认已导入相关js包)
<table id="dg" class="easyui-datagrid"></table>
<script type="text/javascript">
$(function() {
$('#loading-mask').fadeOut('normal');
$('#dg').datagrid({
url : 'query.do',//请求连接
pagination:"true",//是否显示分页
columns : [ [ {//配置列
field : 'name',//对应数据的字段
title : '姓名',//表头名称
width : 100//表宽
}, {
field : 'age',
title : '姓名',
width : 100
}, {
field : 'school',
title : '学校',
width : 100,
align : 'right'
} ] ]
});
})
</script>
3.前端分页发送的参数为:
EasyUI-datagrid会自动带上下面两个参数传给后台
page 页码 rows 每页显示行数
后端可以接受这两个参数实现分页处理
二、后端
1.后端使用的是spring MVC
@RequestMapping("query")
@ResponseBody
public EasyJson query(EasyPage page) {
page = sysKingService.getListByCriteria(page, criterions, null);
return page.getJson();//返回json数据
}
page对象里面有page 和 rows两个成员对象,springMVC会自动填充参数
2.后台返回数据
{
"total": 550,//总页数
"rows": [
{
"name": "king0",
"age": 0,
"school": null
}
}