EasyUI_使用datagrid分页 （Day_28）

本次分页涉及技术点 SSM+PageHelper+DatagrId

先来看下效果：

 这是无条件分页，下一篇博客我们将讲有条件分页。

无论你是使用js加载table 还是直接使用标签。

使用datagrid分页都离不开一个属性： pagination

1、若使用js加载数据，pagination 属性设置为'true' 即可在DataGrid控件底部显示分页工具栏。

 $(function(){
        $('#tt').datagrid( {
            rownumbers : true,//显示行号
            checkOnSelect:true,//使行只有在复选框选中时，才是真正的选中
            fitColumns:true,//让表格列宽，强行自适应到整合页面宽度
            pageList: [1,2,3],//选择一页显示多少数据
            pagination : true,//在DataGrid控件底部显示分页工具栏。
        });
    });

2、 若使用标签加载，同样pagination 属性设置为'true' 即可。

 3、使用DataGrid控件 分页之前 ，我们先了解下它的分页原理。如图，可以看到它实际上是根据page（当前在第几页）,rows（一页显示多少条数据） 进行分页。

以前我们知道，分页需要total,也就是总记录条数，当你将所有的数据传递给它，并告诉它total, pageList 属性能自动根据你设的值，每页显示多少条数据。

了解了他的原理，分页也就很简单了。

 4、service 实现类，这个很简单，只是做了一个查询全部的操作

5、controller层，我们利用PageHelper 来帮助我们实现分页。

      因为分页每次会自动请求datagrid的url,并且携带page,rows的参数，所以我们需要在方法参数中定义这两个参数

　　我们能通过pageInfo.getTotal 来获取total.

 controller层代码：

/**
     * 查询全部取派标准表
     * @return
     */
    @RequestMapping("StandardAll")
    @ResponseBody
    public Object StandardAll(Integer page,Integer rows)
    {

　　　　 //分页每次会自动请求datagrid的url,并且携带page,rows的参数
        Page<Standard> pageInfo = PageHelper.startPage(page, rows);
        /*获得所有取派信息*/
        List<Standard> list = standardService.SelAll();
        /*获取总记录条数，将结果响应给浏览器 json格式*/
        long total = pageInfo.getTotal();
        /*封装在map中*/
        Map<String,Object> map=new HashMap<String,Object>();
        /*前面我们知道，pagination 分页是根据rows,pages,所以只需根据map 键值对的特点来找到rows*/
        map.put("rows",list);
        map.put("total",total);
        return JSON.toJSON(map);
    }

6、考虑到有些小伙伴可能需要，页面代码也一并发出来吧。

<table id="tt" class="easyui-datagrid" id="tt" class="easyui-datagrid"
           striped="true"
           url="/jsp/Standard/StandardAll"
           toolbar="#tb"
           pagination="true"
           pageList="[1,2,3]">
        <thead>
        <tr>
            <th field="id" width="120" align="center" checkbox="true">编号</th>
            <th field="name" width="120" align="center">收派名称</th>
            <th field="minweight" width="120" align="center">最小重量</th>
            <th field="maxweight" width="120" align="center">最大重量</th>
            <th field="user_id" width="120" align="center">操作人</th>
            <th field="updatetime" width="150" align="center">操作时间</th>
        </tr>
        </thead>
    </table>

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