SSJ三大框架集成,前台使用easyUI正确的展示分页

easyUI前台展示分页时需要得到的数据是什么样子的?

通过后台响应参数可以看出:是total,和rows

只需要后台正确的响应回前台
后台Spring Data Jpa集成Spring,SpringMVC时响应回的分页数据是page对象
所以把page对象封装起来返回前台就OK

• 首先创建一个类UIPage,有total和rows字段
• 提供构造方法封装得到的page对象

public class UIPage<T> {
    private Long total;//总条数
    private List<T> rows;//一条数据的信息
    //把我们employeeService.findPageByQuery()得到的分页对象封装起来适应前台UI的格式
    public UIPage(Page page){
        this.total = page.getTotalElements();
        this.rows = page.getContent();
    }
	getset.....

• controller层

	@RequestMapping("/page")
    @ResponseBody
    public UIPage<Employee> getPage(EmployeeQuery baseQuery) {
        Page page = employeeService.findPageByQuery(baseQuery);
        return new UIPage<Employee>(page);
    }

通过返回UIPage对象,前台得到正确的参数响应

• 前台jsp数据的显示

<%--
    准备数据表格datagrid
    pagination="true":分页的支持
    sortable="true":排序的支持
    onRowContextMenu:showMenu:支持右键点击显示添加,修改,删除按钮
    editor:'text':可选中一行后双击编辑
    pageList:[5,10,15,20]:分页显示的条数选择
--%>
<table id="employeeGrid" class="easyui-datagrid" fit="true" pagination="true"
       data-options="url:'/employee/page',fitColumns:true,singleSelect:false,
       toolbar:'#gridTools',onRowContextMenu:showMenu,pageList:[5,10,15,20],
       ">
    <thead>
    <tr>
        <th data-options="field:'ck',checkbox:true"></th>
        <th data-options="field:'id',width:100,align:'center'" sortable="true">编码</th>
        <th data-options="field:'headImage',width:100,formatter:formatImage">头像</th>
        <th data-options="field:'username',width:100" sortable="true">用户名</th>
        <th data-options="field:'password',width:100">密码</th>
        <th data-options="field:'email',width:100">邮箱</th>
        <th data-options="field:'age',width:100,align:'center'" sortable="true">年龄</th>
        <th data-options="field:'department',width:100,formatter:formatDept" sortable="true">部门</th>
    </tr>
    </thead>
</table>