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的分页就完成了