EasyUI_使用datagrid分页 (Day_28)
本次分页涉及技术点 SSM+PageHelper+DatagrId
先来看下效果:
这是无条件分页,下一篇博客我们将讲有条件分页。
无论你是使用js加载table 还是直接使用标签。
使用datagrid分页都离不开一个属性: pagination
1、若使用js加载数据,pagination 属性设置为'true' 即可在DataGrid控件底部显示分页工具栏。
1 $(function(){
2 $('#tt').datagrid( {
3 rownumbers : true,//显示行号
4 checkOnSelect:true,//使行只有在复选框选中时,才是真正的选中
5 fitColumns:true,//让表格列宽,强行自适应到整合页面宽度
6 pageList: [1,2,3],//选择一页显示多少数据
7 pagination : true,//在DataGrid控件底部显示分页工具栏。
8 });
9 });
2、 若使用标签加载,同样pagination 属性设置为'true' 即可。
3、使用DataGrid控件 分页之前 ,我们先了解下它的分页原理。如图,可以看到它实际上是根据page(当前在第几页),rows(一页显示多少条数据) 进行分页。
以前我们知道,分页需要total,也就是总记录条数,当你将所有的数据传递给它,并告诉它total, pageList 属性能自动根据你设的值,每页显示多少条数据。
了解了他的原理,分页也就很简单了。
4、service 实现类,这个很简单,只是做了一个查询全部的操作
5、controller层,我们利用PageHelper 来帮助我们实现分页。
因为分页每次会自动请求datagrid的url,并且携带page,rows的参数,所以我们需要在方法参数中定义这两个参数
我们能通过pageInfo.getTotal 来获取total.
controller层代码:
1 /** 2 * 查询全部取派标准表 3 * @return 4 */ 5 @RequestMapping("StandardAll") 6 @ResponseBody 7 public Object StandardAll(Integer page,Integer rows) 8 { 9 10 //分页每次会自动请求datagrid的url,并且携带page,rows的参数 11 Page<Standard> pageInfo = PageHelper.startPage(page, rows); 12 /*获得所有取派信息*/ 13 List<Standard> list = standardService.SelAll(); 14 /*获取总记录条数,将结果响应给浏览器 json格式*/ 15 long total = pageInfo.getTotal(); 16 /*封装在map中*/ 17 Map<String,Object> map=new HashMap<String,Object>(); 18 /*前面我们知道,pagination 分页是根据rows,pages,所以只需根据map 键值对的特点来找到rows*/ 19 map.put("rows",list); 20 map.put("total",total); 21 return JSON.toJSON(map); 22 }
6、考虑到有些小伙伴可能需要,页面代码也一并发出来吧。
1 <table id="tt" class="easyui-datagrid" id="tt" class="easyui-datagrid" 2 striped="true" 3 url="/jsp/Standard/StandardAll" 4 toolbar="#tb" 5 pagination="true" 6 pageList="[1,2,3]"> 7 <thead> 8 <tr> 9 <th field="id" width="120" align="center" checkbox="true">编号</th> 10 <th field="name" width="120" align="center">收派名称</th> 11 <th field="minweight" width="120" align="center">最小重量</th> 12 <th field="maxweight" width="120" align="center">最大重量</th> 13 <th field="user_id" width="120" align="center">操作人</th> 14 <th field="updatetime" width="150" align="center">操作时间</th> 15 </tr> 16 </thead> 17 </table>
至此,分页就结束了,需要有条件分页请看下一篇博客吧。喜欢博主的就推荐,关注,收藏 三连吧。