Easyui 使用datagrid分頁 詳解 代碼

做網站的後臺設計,用到了easyui,在使用datagrid的分頁時遇到了很多問題,比如如何傳遞分頁參數,如何接收總的數據量,經過小半天的研究,終於搞出來了,下面是一些常遇到的問題,可能會對新手有所幫助

1.這是我的前端代碼

    <script type="text/javascript">
           var datagrid;  //定義全局變量
           var editRow = "";//定義當前編輯的行
           datagrid = $("#dataGrid").datagrid({
               title: "自助遊管理",
               border: false,
               locale: "zh_CN",
               iconCls: 'icon-save',
               striped: true,
               sortOrder: "desc",
               collapsible: false,
               url: "/Admin/DiyTour/GetJsonList",
               queryParams: { dtNumber:"", dtTitle: ""},
               columns: [[
                   { field: 'ID', title: 'ID', width: '5%', algin: 'center' },
                   { field: 'dtNumber', title: '編號', width: '10%', align: 'center' },
                   { field: 'dtTitle', title: '標題', width: '25%', align: 'center' },
                   { field: 'dtTheme', title: '主題', width: '10%', align: 'center' },
                   { field: 'dtFitTime', title: '適合時段', width: '10%', align: 'center' },
                   { field: 'AddTime', title: '添加時間', width: '10%', align: 'center' },
                   {
                       field: "operateID", title: '操作',width:'27%', align: 'center', formatter: function (value, rowData, rowIndex) {
                           return "a";
                       }
                   }
               ]],
               toolbar: [{
                   id: 'btnAdd',
                   text: "添加",
                   iconCls: 'icon-add',
                   handler: function () {
                       $("#winAdd").window("open");
                   }
               }, {
                   id: 'btnEdit',
                   text: "修改",
                   iconCls: 'icon-edit',
                   handler: function () {
                       alert("修改");
                   }
               }],
               pagination: true,//表示在datagrid設置分頁            
               rownumbers: false,
               singleSelect: true,
           });
            $('#dataGrid').datagrid('getPager').pagination({
                pageSize: 10,
                pageNumber: 1,
                pageList: [10, 20, 30, 40, 50],
                beforePageText: '第',//頁數文本框前顯示的漢字 
                afterPageText: '頁    共 {pages} 頁',
                displayMsg: '當前顯示 {from} - {to} 條記錄   共 {total} 條記錄',
           });

           //條件查詢
           function Search() {
               var queryParameter = $('#dataGrid').datagrid("options").queryParams;
               queryParameter.dtNumber = $("#dtNumber").val();
               queryParameter.dtTitle = $("#dtTitle").val();
               $("#dataGrid").datagrid("reload");
           }
       </script>


<!--條件查詢 -->
<div data-options="region:'north',split:false,border:false,title:'查詢條件',collapsed:false,iconCls:'icon-search'" style="height:60px;margin:5px 5px 0 5px">
        產品編號:<input type="text"  name="dtNumber" id="dtNumber" class="easyui-validatebox" maxlength="10" style="height:15px;margin:0 5px 0 5px" />
        產品標題:<input type="text"  name="dtTitle" id="dtTitle" class="easyui-validatebox" maxlength="10" style="height:15px;margin:0 5px 0 5px" />
       &nbsp;&nbsp;<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search'"  οnclick="Search()">查詢</a>
    </div>

<!--數據展示 -->
<div data-options="region:'center',fit:true,split:false,border:false" >
    <table  id="dataGrid" style="width:100%"></table>
</div>

2.這是我後端返回的數據格式

{"total":"11","rows":[{"ID":"1","dtNumber":"ADDFSSA","dtTitle":"00","dtTheme":"演藝秀","dtFitTime":"上午","AddTime":"2014/12/15 15:26:40","operateID":"1"},{"ID":"2","dtNumber":"ADDFSSA","dtTitle":"紐約市徒步遊，發現原汁原味的百老匯","dtTheme":"城市之旅","dtFitTime":"全天(白+黑)","AddTime":"2014/12/15 16:05:56","operateID":"2"}.......]}

在後臺返回的json中帶上total這個字段,前臺設計pageSize後就可以自動識別分頁數據了

3.這是前端生成的樣子,easyui會自動識別total,pageSize,pageNumber等等,好了這樣一個easyui的分頁就完成了