1.效果图
这是最基础版本,比较简单,首先下载一套easy放到项目中,然后看我的页面引入的什么你就引入什么
页面数据:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.4.3/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.4.3/themes/icon.css">
</head>
<body>
<table id="dgs" title="韩安生easyui测试" class="easyui-datagrid" fitColumns="true" pagination="true"
toolbar="#tb" rownumbers="true">
<thead>
<tr>
<th field="cb" checkbox="true" align="center"></th>
<!--<th field="tid" width="20" align="center" hidden="true"></th>-->
<th field="id" width="200" >学号</th>
<th field="className" width="100" align="center">班级名称</th>
<th field="classSumNum" width="100" align="center">班级人数</th>
<th field="teacherName" width="100" align="center">老师名称</th>
<th field="fdyName" width="100" align="center">辅导员名称</th>
<th field="fdyNum" width="100" align="center">辅导员编号</th>
</tr>
</thead>
</table>
<script src="js/jquery.js"></script>
<script src="js/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
<script>
$(function(){
//注意:本来我的url是写在table标签中的,但是那样的话参数不好传递需要拼接,所以把url动态写
$("#dgs").datagrid({
collapsible: true,
url: "../../fysq",
method: 'POST',
sortName: 'title',
loadMsg: "数据加载中...",
//数据展示我写的静态的在table中,也可以用下面的动态的进行展示
// columns:[[
// {title: '学号', field: 'id', width: 200, align: 'center'},
// {title: '班级名称', field: 'className', width: 100, align: 'center'},
// {title: '班级人数', field: 'classSumNum', width: 100, align: 'center'},
// {title: '老师名称', field: 'teacherName', width: 100, align: 'center'},
// {title: '辅导员名称', field: 'fdyName', width: 100, align: 'center'},
// {title: '辅导员编号', field: 'fdyNum', width: 100, align: 'center'},
// ]]
});
//自定义分页条的样式,因为默认的可读性不是很好
var p = $('#dgs').datagrid().datagrid('getPager');
p.pagination({
pageSize: 10,
pageList: [10, 20, 30, 40, 50],
beforePageText: '第',
//下面这几个参数就用就这个名称不用改
afterPageText: '共{pages}页',
displayMsg: '当前显示 {from} 到 {to} ,共{total}记录',
// onSelectPage: function (pageNumber, pageSize) {
// }
})
})
</script>
</body>
</html>
前后台交互主要注意前台参数传递什么,后台需要封装什么数据类型进行返回,前台默认传递俩参数page,rows,而后台封装的数据需要为map,map中一个rows放数据,一个total放数据条数,知道了这问题就好办了
controller代码:
public Map<String,Object> fysq(int page,int rows){
Map<String,Object> map=new HashMap<String,Object>();
List<ClassTable> ct=dataShowService.queryInfoxPlus( page, rows);
int count=dataShowService.queryAllTS();
map.put("rows",ct);
map.put("total",count);
return map;
}
注意:在service根据page算出来数据起始条数,page=(page-1)*rows,后面代码过于简单就不咱贴了