Loading

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>

 

 

至此,分页就结束了,需要有条件分页请看下一篇博客吧。喜欢博主的就推荐,关注,收藏 三连吧。

 

posted @ 2021-01-21 11:10  A零号  阅读(2549)  评论(3编辑  收藏  举报