jquery easyui datagrid 分頁 詳解

由於項目原因，用了jquery easyui 感覺界面不錯，皮膚樣式少點，可是官網最近打不開了，資料比較少，給的demo沒有想要的效果，今天在用datagrid 做分頁顯示的時候，折騰了半天，網上的資料也比較少，後自己動手，終於解決，廢話不說，開始：

datagrid分頁 有一個附加的分頁控件，只需後臺獲取分頁控件自動提交的兩個參數rows每頁顯示的記錄數和page;//當前第幾頁

然後讀取相應頁數的記錄，和總記錄數total一塊返回即可 界面如下：

1、下邊是datagrid的顯示對話框，我直接用table把列頭顯示出來，感覺比用js寫要易於閱讀

<tableid="list_data"cellspacing="0"cellpadding="0">
    <thead>
        <tr>
            <thfield="fldAppDept"width="100">部門</th>
            <thfield="fldAppNode"width="100">網站</th>
            <thfield="fldAppName"width="100">名稱</th>
            <thfield="fldAppMgr"width="100">管理員</th>
            <thfield="fldAppNote"width="100">註釋</th>
            <thfield="fldAppType"width="100">類型</th>
            <thfield="fldTelphone"width="100">電話</th>
            <thfield="fldAppImg"width="100">職務</th>
            <thfield="fldAppMonitor"width="100">啓用監測</th>
            <thfield="fldAppLevel"width="100">要重級別</th>
        </tr>
    </thead>
</table>

2、js代碼，用於構建datagrid

注意 要想顯示分頁控件，pagination屬性必須爲true

//datagrid初始化
    $('#list_data').datagrid({
        title:'應用系統列表',
        iconCls:'icon-edit',//圖標
        width: 700,
        height: 'auto',
        nowrap: false,
        striped: true,
        border: true,
        collapsible:false,//是否可摺疊的
        fit: true,//自動大小
        url:'listApp.action',
        //sortName: 'code',
        //sortOrder: 'desc',
        remoteSort:false,
        idField:'fldId',
        singleSelect:false,//是否單選
        pagination:true,//分頁控件
        rownumbers:true,//行號
        frozenColumns:[[
            {field:'ck',checkbox:true}
        ]],
        toolbar: [{
            text: '添加',
            iconCls: 'icon-add',
            handler: function() {
                openDialog("add_dialog","add");
            }
        }, '-', {
            text: '修改',
            iconCls: 'icon-edit',
            handler: function() {
                openDialog("add_dialog","edit");
            }
        }, '-',{
            text: '刪除',
            iconCls: 'icon-remove',
            handler: function(){
                delAppInfo();
            }
        }],
    });
    //設置分頁控件
    var p = $('#list_data').datagrid('getPager');
    $(p).pagination({
        pageSize: 10,//每頁顯示的記錄條數，默認爲10
        pageList: [5,10,15],//可以設置每頁記錄條數的列表
        beforePageText: '第',//頁數文本框前顯示的漢字
        afterPageText: '頁    共 {pages} 頁',
        displayMsg: '當前顯示 {from} - {to} 條記錄   共 {total} 條記錄',
        /*onBeforeRefresh:function(){
            $(this).pagination('loading');
            alert('before refresh');
            $(this).pagination('loaded');
        }*/
    });

3、後臺我是通過struts2處理的數據 返回json串

private JSONObject result;//返回的json

    private String rows;//每頁顯示的記錄數

    private String page;//當前第幾頁

        private AppServiceInter appService;

    public JSONObject getResult() {
        return result;
    }
    public void setResult(JSONObject result) {
        this.result = result;
    }
    public void setAppService(AppServiceInter appService) {
        this.appService = appService;
    }

        public String getRows() {
        return rows;
    }
    public void setRows(String rows) {
        this.rows = rows;
    }
    public String getPage() {
        return page;
    }
    public void setPage(String page) {
        this.page = page;
    }
        /**
     * 查詢應用系統
     * @return
     */
    public String listApp() {
        System.out.println("---------------");
        //當前頁
        int intPage = Integer.parseInt((page ==null || page =="0") ?"1":page);
        //每頁顯示條數
        int number = Integer.parseInt((rows ==null || rows =="0") ?"10":rows);
        //每頁的開始記錄  第一頁爲1  第二頁爲number +1
        int start = (intPage-1)*number;

        List<TblApp> list = appService.findByPageApp(start,number);//每頁的數據，放入list
            Map<String, Object> jsonMap = 
new HashMap<String, Object>();//定義map
            jsonMap.put("total", appService.getCountApp());//total鍵 存放總記錄數，必須的
            jsonMap.put("rows", list);//rows鍵 存放每頁記錄 list
            result = JSONObject.fromObject(jsonMap);//格式化result   一定要是JSONObject

        //result = JSONArray.fromObject(jsonMap);
        return SUCCESS;
    }

4、附上struts.xml配置文件

[html] view plaincopyprint?

<packagename="app"extends="json-default">
        <actionname="listApp"class="appAction"method="listApp">
            <resulttype="json">
                <paramname="root">result</param>
            </result>
        </action>
</package>