C#中easyUI DataGrid分页的前后端实现

前端代码：JQuery创建一个datagrid,jsondata是从后端获取的json对象，pager是dg的分页控件，通过onSelectPage事件刷新页面内容，其间调用query获取分页数据。

              $('#dg').datagrid({
                        pageList: [10, 20, 30, 40, 50],
                        data: jsondata,
                        pagination: true,
                        toolbar: '#tb',
                        columns: [[
                            { field: 'id', title: '编号', width: 20, align: 'center', sortable: true },
                            { field: 'username', title: '用户名', width: 50, align: 'center', sortable: true },
                            { field: 'sex', title: '性别', width: 20, align: 'center', sortable: true },
                            { field: 'birthday', title: '出生年月', width: 50, align: 'center', sortable: true },
                            { field: 'password', title: '密码', width: 20, align: 'center', sortable: true },
                            { field: 'address', title: '住址', width: 100, align: 'center', sortable: true },
                            { field: 'mobile', title: '手机', width: 50, align: 'center', sortable: true },
                            { field: 'email', title: '邮箱', width: 50, align: 'center', sortable: true },
                            { field: 'usergroup', title: '用户组', width: 20, align: 'center', sortable: true }
                        ]],
                        onClickRow: function (rowIndex, rowData) {
                            curFocuRowBh = rowData.bh;
                            curRowdata = rowData;
                            setValue(rowData);
                        }
                    });
                    var pager = $('#dg').datagrid('getPager');
                    pager.pagination({
                        pageSize: 20, 
                        beforePageText: '第', 
                        afterPageText: '页    共 {pages} 页',
                        displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录',
                        onSelectPage: function (pageNumber, pageSize) {
                            query(pageNumber, pageSize);
                        }
                    });

 function query(page, rows) {
            $.ajax({
                type: "post",
                url: "/UI/Main_page/userManage.aspx/getUsertbPageData",
                dataType: "text",
                async: false,
                data: "{pageindex:'" + page + "',pagesize:'" + rows+"'}",
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    var hh = JSON.parse(data);
                    var tempdata = JSON.parse(hh.d);
                    console.log(tempdata);
                    $('#dg').datagrid("loadData", tempdata);
                },
                error: function () {
                    alert("数据查询失败!");
                }
            })
        }

后端代码：

        //获取所有记录总数，用于total
        public static int GetUsertbCount() {
            string sql = string.Format("select count(id) as cnt from usertb"); 
            return Convert.ToInt32(SqlHelper.ExecuteDataTable(sql).Rows[0]["cnt"]);
        }
        //获取当前页的记录并转成json字符串
        public static string GetJson(string pageindex, string pagesize)
        {
            string sqltext = "select top " + pagesize + " * from usertb where id not in (select top(" + pagesize + " * (" + pageindex + " - 1)) id from usertb)";
            DataTable dt = SqlHelper.ExecuteDataTable(sqltext, new SqlParameter[] { });
            return JsonConvert.SerializeObject(dt);
        }
        //前端接口方法：获取一个标准的DataGrid要求的字符串
        [WebMethod]
        public static string getUsertbPageData(string pageindex, string pagesize)
        {
            //注意必须按照easyUI DataGrid要求的json格式返回json字符串，必须要有：total、rows两个头，否则前端分页不正常
            StringBuilder sb = new StringBuilder();
            sb.Append("{");
            sb.Append(string.Format("\"total\":{0},\"rows\":{1}", GetUsertbCount(), GetJson(pageindex, pagesize)));
            sb.Append("}");
            return sb.ToString();
        }

秋风写于淄博，业务联系与技术交流：Q375172665