easyui datagrid 分頁 詳解

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:取消選擇一行。

連接：http://www.javashuo.com/article/p-mvwornvu-ek.html