jquery easyui datagrid 分页 详解

前些天用jquery easyui的table easyui-datagrid做分页显示的时候，折腾了很久，后来终于解决了。其实不难，最主要我不是很熟悉前端的东西。

table easyui-datagrid分页 有一个附加的分页控件，只需后台获取分页控件自动提交的两个参数rows（每页显示的记录数）和page（当前第几页）然后读取相应页数的记录，和总记录数total一块返回即可。

1.界面

2.前端代码

<table id="dg" title="文章管理" class="easyui-datagrid" fitColumns="true" pagination="true"
    url="${pageContext.request.contextPath}/admin/showAllTrainee" 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="title" width="200" formatter="formatTitle">标题</th>
            <th field="time" width="100" align="center">发布日期</th>
            <th field="tname" width="100" align="center">实习生姓名</th>
            <th field="major" width="100" align="center">专业</th>
            <th field="view_num" width="30" align="center">阅读量</th>
            <th field="aname" width="100" align="center">发布者</th>
        </tr>
    </thead>
</table>

3.后端我用的是springmvc处理数据，返回json串

package com.jyb.pojo;

/**
 *
 * @author
 * @时间 2016-08-06
 *
 */
public class Page {

    private int page;     //当前第几页
    private int rows;     //每页显示记录数
    private int firstPage;  //第几条记录起始

    public Page(int page, int rows){
        this.page = page;
        this.rows = rows;
    }
    public int getPage() {
        return page;
    }
    public void setPage(int page) {
        this.page = page;
    }
    public int getRows() {
        return rows;
    }
    public void setRows(int rows) {
        this.rows = rows;
    }
 
    public int getFirstPage() {
        firstPage = (page - 1) * rows;
        return firstPage;
    }

}

/**
     * @author
     * @时间 2016-08-06
     * @param page  当前第几页
     * @param rows  每页显示的记录数
     * @param title
     * @return Map
     */
    @SuppressWarnings({ "rawtypes", "unchecked" })
    @ResponseBody
    @RequestMapping(value="/showAllTrainee")
    public Map showAllTrainee(@RequestParam(value="page", required=false) String page,
            @RequestParam(value="rows", required=false) String rows, @RequestParam(value="title", required=false) String title){

          Page pageBean = new Page(Integer.parseInt(page), Integer.parseInt(rows));
          Map reMap = new HashMap();
          Map paraMap = new HashMap();    

          paraMap.put("title", title);
          paraMap.put("firstPage", pageBean.getFirstPage());
          paraMap.put("rows", pageBean.getRows());

          try {
            List<Map> list = adminService.showAllTrainee(paraMap);
            long total = adminService.getTraineeTotal(paraMap);
            reMap.put("rows", list);     //存放每页记录数
            reMap.put("total", total);   //存放总记录数 ，必须的
        } catch (Exception e) {
            e.printStackTrace();
        }
         return reMap;
    }

其中controller中必须返回json字符串所以加了@ResponseBody注解。

4.mybatis映射文件

<select id="selectTraineeLimit" parameterType="map" resultType="map">
                 select
                     trainee.tid,
                     admin.name aname,
                     trainee.name tname,
                     trainee.major,
                     trainee.time,
                     trainee.title,
                     trainee.view_num
                 from
                     trainee, admin
                 <where>
                     <if test="title != null and title != ''">
                        and trainee.title like concat('%',#{title},'%')
                     </if>
                        and trainee.aid = admin.aid
                 </where>
                 order by
                     trainee.time desc, trainee.tid
                 limit
                     #{firstPage},
                     #{rows};
         </select>

         <select id="getTraineeTotal" parameterType="map" resultType="long">
                select count(tid) from trainee
                <where>
                         <if test="title != null and title != ''">
                            and trainee.title like concat('%',#{title},'%')
                         </if>
                         <if test="name != null and name != ''">
                             and name like concat('%',#{name},'%')
                         </if>
                         <if test="major != null and major != ''">
                             and major like concat('%',#{major},'%')
                         </if>
                         <if test="city != null and city != ''">
                             and city like concat('%',#{city},'%')
                         </if>
                         <if test="company != null and company != ''">
                             and company like concat('%',#{company},'%')
                         </if>
                         <if test="title != null and title != ''">
                             and title like concat('%',#{title},'%')
                         </if>
                </where>
         </select>

其他代码就不上了，特写出重点的方便自己或别人作为参考。如果有什么问题大家可以留言，我看见了会解答。

附：

table easyui-datagrid                  生成一个表格。
             属性如下：
                 1)title:该DataGrid面板的标题文本。
                 2)iconCls:一个CSS类，将提供一个背景图片作为标题图标。
                 3)border：当true时，显示该datagrid面板的边框。
                 4)width:面板宽度，自动列宽。
                 5)height:面板高度，自动列高。
                 6)columns:该DataGrid列配置对象，查看column属性可获取更多信息。
                 7)frozenColumns:跟Columns属性相同，但是这些列将会被固定在左边。
                 8)striped:当true时，单元格显示条纹。默认false。
                 9)method:通过该方法类型请求远程数据。默认post。
                10)nowrap:当true时，显示数据在同一行上。默认true。
                11)idField:说明哪个字段是一个标识字段。
                12)url:一个URL，从远程站点获取数据。
                13)loadMsg:当从远程站点加载数据时，显示一个提示信息。默认"Processing,please wait …"。自定义覆盖。
                14)pagination:当true时在DataGrid底部显示一个分页工具栏。默认false。
                15)rownumbers:当true时显示行号。默认false。
                16)singleSelect:当true时只允许当前选择一行。默认false。
                17)fit:当true时，设置大小以适应它的父容器。默认false。
                18)pageNumber:当设置分页属性时，初始化的页码编号。默认从1开始
                19)pageSize:当设置分页属性是，初始化的页面大小。默认10行
                20)pageList:当设置分页属性时，初始化页面的大小选择清单。默认[10,20,30,40,50]
                21)queryParams:当请求远程数据时，也可以发送额外的参数。
                22)sortName:定义哪列可以排序。
                23)sortOrder:定义列的排列顺序，只能是'asc'或'desc'。默认asc。
             Column属性如下：
                 1)title:该列标题文本。
                 2)field:该列对应的字段名称。
                 3)width：列宽。
                 4)rowspan:说明该单元格需要多少行数。
                 5)colspan:说明该单元格需要多少列数。
                 6)align:说明Column数据的对齐方式。'left'，'right'，'center' 都可以使用。
                 7)sortable:当true时，允许该列进行排序。
                 8)checkbox:当true时，允许该列出现checkbox。
             事件如下：
                 1)onLoadSuccess:当远程数据加载成功是激活。
                 2)onLoadError:当远程数据加载发现一些错误时激活。
                 3)onClickRow:当用户点击某行时激活，参数包含：
                    rowIndex: 点击的行索引，从0开始。
                    rowData: 点击行时对应的记录。
                4)onDblClickRow:当用户双击某行时激活，参数包含：
                    rowIndex: 点击的行索引，从0开始。
                    rowData: 点击行时对应的记录。
                5)onSortColumn:当用户对某列排序时激活，参数包含：
                   sort:排序字段名称。
                   order:排序字段类型。
                6)onSelect:当用户选择某行时激活，参数包含:
                   rowIndex: 点击的行索引，从0开始。
                   rowData: 点击行时对应的记录。
                7)onUnselect:当用户取消选择某行时激活，参数包含:
                    rowIndex: 点击的行索引，从0开始。
                    rowData: 点击行时对应的记录。
             方法如下：
                 1)options:返回选择对象。
                 2)resize:重调大小，生成布局。
                 3)reload:重新加载数据。
                 4)fixColumnSize:固定列大小。
                 5)loadData:加载本地数据，过去的行会被删除。
                 6)getSelected:返回第一个选中行的记录，若未选返回null。
                 7)getSelections:返回选中的所有行，当没有选择记录时将返回空数组。
                 8)clearSelections:清除所有选项的选择状态。
                 9)selectRow:选择一行，行索引从0开始。
                10)selectRecord:通过传递一个ID值参数，选择一行。
                11)unselectRow:取消选择一行。