asp.net MVC结合EasyUI的datagrid实现分页加载数据

1.引用EasyUI的相关插件，在html文档中编写datagrid，如下：

    <div class="easyui-layout" data-options="border: false,fit: true">
        <div data-options="region:'center',border: false">
            <table id="AdminList" class="easyui-datagrid" style="width:100%;height:100%;"
				data-options="
                    rownumbers: true,
                    fitColumns: true,
					striped: true,
                    singleSelect: true,
					pagination: true,
                    pageSize: 20,
					pageList: [20,50,100],
					toolbar: '#A_tool',
                    remoteSort: false,
                    multiSort: true,
                    onClickRow: OnclickAdminRow
				">
                <thead>
                    <tr>
                        <th data-options="field:'LoginName',width:150,halign:'center',align:'left',sortable:true,fixed:true">账号</th>
                        <th data-options="field:'Name',width:150,halign:'center',align:'left',sortable:true,fixed:true">昵称</th>
                        <th data-options="field:'State',width:100,halign:'center',align:'center',sortable:true,fixed:true,formatter:formatState">状态</th>
                        <th data-options="field:'CreateTime',width:120,halign:'center',align:'left',sortable:true,fixed:false">创建时间</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
    <div id="A_tool" class="pd-12-20">
        <div class="float-l">
            <label>关键字：</label>@Html.TextBox("Keyword", "", new { @class = "input-txt-te width-150", @autocomplete = "off" })
            <a href="javascript:void(0)" class="easyui-linkbutton a-success" οnclick="SearchAdmin()"><i class="fa fa-search i-green"></i> 搜索</a>
        </div>
        <div class="float-r">
            <a href="javascript:void(0)" class="easyui-linkbutton a-purple" plain="true" οnclick="AddAdmin()"><i class="fa fa-plus i-blue"></i> 添加</a>
            <a href="javascript:void(0)" class="easyui-linkbutton a-info" plain="true" οnclick="EditAdmin()"><i class="fa fa-edit i-orange"></i> 编辑</a>
            <a href="javascript:void(0)" class="easyui-linkbutton a-info" plain="true" οnclick="SetAdminStatus(0)" id="AdminEnable"><i class="fa fa-play i-green"></i> 启用</a>
            <a href="javascript:void(0)" class="easyui-linkbutton a-red" plain="true" οnclick="SetAdminStatus(1)" id="AdminDisable"><i class="fa fa-square i-browm"></i> 停用</a>
        </div>
        <div class="clear"></div>
    </div>

2.在js中实现加载数据，如下：

<script type="text/javascript">
        $(function () {
            LoadAdminListDataGrid();
        })
        function LoadAdminListDataGrid() {
            var keywordVal = $('#Keyword').val();
            $("#AdminList").datagrid({
                url: '@Url.Action("GetAdminDataGrid", "Admin")',
                method: 'get',
                queryParams: {//这里是查询的参数，如果有多个参数直接写在这里即可
                    Keyword: keywordVal
                }
            });
        }
        function formatState(val, row, index) {
            if (row.State == 0) {
                val = '<span style="display:inline-block;background-color:#abbac3;color:#fff;padding:1px 5px;">' +
                        '正常' +
                      '</span>';
            }
            else {
                val = '<span style="display:inline-block;background-color:#d15b47;color:#fff;padding:1px 5px;">' +
                        '停用' +
                      '</span>';
            }
            return val;
        }
        function SearchAdmin() {
            LoadAdminListDataGrid();
        }
        function AddAdmin() {
            layer.open({
                title: '添加员工',    //标题
                type: 2,    //什么类型的弹窗：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                anim: 2,   //弹窗动画效果
                area: ['450px', '320px'],   //弹窗宽高
                offset: 'auto',  //弹窗的位置
                maxmin: false,  //是否显示最大化和最小化
                content: '@Url.Action("AddAdmin","Admin")',   //内容
                cancel: function (index, layero) {  //关闭按钮事件
                    RefreshAdmin();
                }
            });
        }
        function RefreshAdmin() {
            $('#AdminList').datagrid('reload');
        }
        function EditAdmin() {
            var row = $('#AdminList').datagrid('getSelected');
            if(row) {
                var url = '@Url.Action("EditAdmin", "Auth")';
                url += "?id=" + row.Id;
                layer.open({
                    title: '编辑用户',    //标题
                    type: 2,    //什么类型的弹窗：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                    anim: 2,   //弹窗动画效果
                    area: ['450px', '370px'],   //弹窗宽高
                    offset: 'auto',  //弹窗的位置
                    maxmin: false,   //最大化/最小化
                    content: url,
                    cancel: function (index, layero) {  //关闭按钮事件
                        RefreshAdmin();
                    }
                });
            }
            else {
                var msg = "请选中需要编辑的数据，在执行此操作！";
                layer.alert(msg, { title: '提示', offset: 'auto', icon: 0 });
            }
        }
        function OnclickAdminRow(index, row) {
            if (row) {
                if (row.State == 0) {
                    $('#AdminEnable').linkbutton('disable');
                    $('#AdminDisable').linkbutton('enable');
                }
                else {
                    $('#AdminEnable').linkbutton('enable');
                    $('#AdminDisable').linkbutton('disable');
                }
            }
        }
        function SetAdminStatus(type) {
            var msg, status;
            if (type == 0) {
                msg = "请选中需要启用的数据，在执行此操作！";
                status = 0;
            }
            else {
                msg = "请选中需要停用的数据，在执行此操作！";
                status = 1;
            }
            var row = $('#AdminList').datagrid('getSelected');
            if (row) {
                var url = '@Url.Action("SetAdminState", "Admin")';
                $.ajax({
                    url: url,
                    type: "Post",
                    data: { id: row.Id, state: status },
                    dataType: "json",
                    success: function (obj) {
                        var statusTxt = status == 0 ? "启用" : "停用";
                        //obj.Status == 0：表示成功，1：表示失败，2：表示提示
                        if (obj.Status == 0) {
                            layer.msg('【' + row.LoginName + '】' + '已被' + statusTxt);
                            RefreshAdmin();
                            row.Status = status;   //将状态更新为修改后的状态以便去调用onClickAttributeRow方法
                            OnclickAdminRow(row);
                        }
                        if (obj.Status == 1) {
                            layer.msg('【' + row.LoginName + '】' + statusTxt + "失败！");
                        }
                    }
                });
            }
            else {
                layer.alert(msg, { title: '提示', offset: 'auto', icon: 0 });
            }
        }
    </script>

 3.调用控制器方法，如下：

（关键：page和rows参数必须是小写的，这是由EasyUI框架自定义决定的）

/// <summary>
        /// 获取员工列表数据
        /// </summary>
        /// <param name="page">当前第几页</param>
        /// <param name="rows">当前页行数</param>
        /// <returns></returns>
        public ActionResult GetAdminDataGrid(AdminListForm form)
        {
            try
            {
                //获取员工列表的方法，PaginationParameter是自己封装的分页方法，
                //往下看会看到查询的linq的方法，可以不用管PaginationParameter究竟要怎么写
                var adminList = _adminService.GetAdminList(new AdminPara()
                {
                    Keyword = form.Keyword,
                    PaginationParameter = PaginationHelper.GetPagingByDescend(form.page, form.rows),
                });
                List<object> list = new List<object>();
                adminList.Items.ToList().ForEach(item =>
                {
                    list.Add(new
                    {
                        Id = item.Id,
                        LoginName = item.LoginName,
                        Name = item.Name,
                        State = item.State,
                        CreateTime = item.CreateTime.ToyyyyMMddHHmmss()
                    });
                });
                var dataGrid = _commonService.GetGridFormat(adminList.TotalCount, list);
                return Json(dataGrid, JsonRequestBehavior.AllowGet);
            }
            catch (Exception e)
            {
                Log.InfoFormat("获取员工列表数据：{0}", e.Message);
                var dataGrid = _commonService.GetGridFormat(0, "");
                return Json(dataGrid, JsonRequestBehavior.AllowGet);
            }
        }

AdminListForm类：

    public class AdminListForm
    {
        /// <summary>
        /// 关键字（账号或昵称）
        /// </summary>
        public string Keyword { get; set; }
        /// <summary>
        /// 当前页数
        /// </summary>
        public int? page { get; set; }
        /// <summary>
        /// 当前页总行数
        /// </summary>
        public int? rows { get; set; }
    }

查询linq方法：

        /// <summary>
        /// 根据条件获取管理员列表
        /// </summary>
        /// <param name="AdminPara"></param>
        /// <returns></returns>
        public IList<AdminInfo> GetAdminList(AdminPara adminPara) 
        {
            #region
            //构造查询语句
            var query = (from a in Entities.T_Admins
                         select new AdminInfo()
                         {
                             Id = a.Id,
                             Name = a.Name,
                             LoginName = a.LoginName,
                             Password = a.Password,
                             State = a.State,
                             CreateTime = a.CreateTime,
                         });

            if (!string.IsNullOrEmpty(adminPara.Keyword))
            {
                var keyword = adminPara.Keyword.Trim();
                query = query.Where(a => a.Name.Contains(keyword) || a.LoginName.Contains(keyword));
            }

            var totalCount = query.Select(a => a.Id).LongCount();

            //排序
            query = query.OrderBy(a => a.Id);

            //分页
            if (adminPara.StartIndex.HasValue)
                query = query.Skip(adminPara.StartIndex.Value);
            if (adminPara.MaxCount.HasValue)
                query = query.Take(adminPara.MaxCount.Value);

            var adminList = query.ToList();

            return adminList;
            #endregion
        }