首先上javascript的代码

$(function () {
LoadGrid();
})

//加载表格！！！
function LoadGrid() {
$('#roleGrid').datagrid({
width: 900,striped: true,//交替条纹
fitColumns: true,//防止水平滚动
fit: true,//自动补全
iconCls: "icon-save",//图标
idField: 'RoleId',//唯一列
url: "GetRoles",dataType: "json",singleSelect: true,//设置为true将只允许选择一行
loadMsg: '正在拼命加载,请稍后...',rownumbers: false,//显示行数
pagination: true,//底部分页工具栏
nowrap: true,//截取超出部分的数据
checkOnSelect: true,//点击一行的时候 checkBox checked(选择)/unchecked(取消选择)
pageNumber: 1,//初始化分页码。
pageSize: 10,//初始化每页记录数。
pageList: [5,10,30],//初始化每页记录数列表
showFooter: false,//定义是否显示行底
columns: [[
{ field: "RoleId",title: "角色编号",width: 60,align: "center",sortable: "true" },{ field: "RoleName",title: "角色名称",width: 100,align: "center" },{ field: "RoleRemarks",title: "备注",{
field: "IsStatus",title: "状态",formatter: function (value,row,index) {
if (value == "0") {
return "正常";
} else if (value == "1") {
return "停用";
}
}
},{
field: "edit",title: "操作",width: 80,index) {
var detail = '<a style="padding:1px;color:black;" onclick="editRole(' + index + ')"><i class="fa fa-edit">编辑';
var deleteBtn = '<a style="color:black;" onclick="delRole(' + index + ')"><i class="fa fa-trash-o">删除</>';
var setrole = '<a style="color:black;" onclick="setRights(' + index + ')"><i class="fa fa-exclamation-triangle">设置权限</>';
return "" + detail + "|" + deleteBtn + "|" + setrole;
}
}
]] //列
});
};

function editRole(i) { //编辑按钮的方法
var rows = $("#roleGrid").datagrid("getRows");
layer.open({
title: false,type: 2,closeBtn: false,area: ['420px','418px'],skin: 'layui-layer-rim',//加上边框
content: ['/Admin/ShowForm/EidtRole','no'],success: function (layero,index) {
var body = layer.getChildFrame('body',index);
body.contents().find("#roleId").val(rows[i].RoleId);
body.contents().find("#roleName").val(rows[i].RoleName);
if (rows[i].RoleRemarks != "-") {
body.contents().find("#remarks").val(rows[i].RoleRemarks);
}
body.contents().find("#isstutas").val(rows[i].IsStatus);
}
});
}

function delRole(i) { //删除用户
var rows = $("#roleGrid").datagrid("getRows");

var postData = {
  roleId: rows[i].RoleId
};

layer.confirm('确认<a href="https://www.jb51.cc/tag/shanchu/" target="_blank" class="keywords">删除</a>该角色？',{
  btn: ['确认','取消'],//按钮
  shade: false //<a href="https://www.jb51.cc/tag/buxianshi/" target="_blank" class="keywords">不显示</a>遮罩
},function (index) {
  $.ajax({
    type: "POST",url: "DeleRole",data: postData,success: function (result) {
      if (result == "true") {
        layer.msg("操作成功！",{
          icon: 6,time: 1000,},function () {
          $("#roleGrid").datagrid("reload");
          layer.close(index);
        });
      } else if (result == "false") {
        layer.msg("操作失败！",{ icon: 2 });
      } else if (result == "msg") {
        layer.msg("系统<a href="https://www.jb51.cc/tag/cuowu/" target="_blank" class="keywords">错误</a>,请联系<a href="https://www.jb51.cc/tag/guanliyuan/" target="_blank" class="keywords">管理员</a>！",{ icon: 0 });
      }
    }
  });
},function (index) {
  layer.close(index);
});

}

然后是html

最后是控制器的方法（这一部分是最重要的，表格能否显示数据，全看这一部分）

/// 动态生成表格的数据 /// /// /// /// public JsonResult GetRoles(int? page,int? rows) { page = page == null ? 1 : page; //第几页 rows = rows == null ? 1 : rows; //行数 List rList = rService.GetAllRoles(Convert.ToInt32(page),Convert.ToInt32(rows)); List roleList = new List(); for (int i = 0; i < rList.Count; i++) { role r = new role(); r.RoleId = rList[i].RoleId; r.RoleName = rList[i].RoleName; if (string.IsNullOrEmpty(rList[i].RoleRemarks)) { r.RoleRemarks = "-"; } else { r.RoleRemarks = rList[i].RoleRemarks; } r.IsStatus = rList[i].IsStatus; roleList.Add(r); } var json = new { total = rService.GetTotal(),rows = roleList }; return Json(json,JsonRequestBehavior.AllowGet); }

最后的最后是控制器相关的方法

/// 分页的数据 /// /// /// /// public List GetAllRoles(int page,int rows) { using (diamondEntities entity = new diamondEntities()) { IQueryable role = entity.roles.OrderBy(a => a.RoleId).Skip((page - 1) * rows).Take(rows); List roleList = role.ToList(); if (roleList.Count > 0) { return roleList; } else { return null; } } }

/// <summary>
/// <a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>总页数
/// </summary>
/// <returns></returns>
public int GetTotal()
{
  using (diamondEntities entity = new diamondEntities())
  {
    IQueryable<role> user = entity.roles.Select(m => m);
    List<role> userList = user.ToList();
    return userList.Count;
  }
}</pre>

以上就是小编为大家带来的浅谈MVC+EF easyui dataGrid 动态加载分页表格全部内容了，希望大家多多支持编程之家~

原文链接：https://www.f2er.com/js/44499.html

datagrid datagrid easyui easyui 分页分页分页