我在一个自己的小程序里,使用了easyui datagrid的控件,原先做程序时,没有考虑记录多,没有考虑分页的问题,后来记录添加多了,需要分页。我参考了网上的各种代码。分页的属性设置了。但是效果还是没有出来,一页中还是现实全部记录,但是分页会出来,每页显示10条记录效果没有。总共分了多少页也有。
我取数据的方式,在控制器里写的方法是这样:
[HttpPost]
public ActionResult LoadUserData() //属于UserController
{
var json = new { total = permitbll.GetAllUserList().Count, rows = permitbll.GetAllUserList() };
return Json(json, JsonRequestBehavior.DenyGet);
}
前端显示数据的页面代码:
@{
ViewBag.Title = "用户管理";
Layout = "/Views/Shared/_Layout.cshtml";
}
@section script{
$(document).ready(function(){
initUserGrid();
});
function initUserGrid(){
$("#grid").datagrid({
url:'/User/LoadUserData', //从控制器获取数据的方式
fitColumns:true,
rownumbers:true,
toolbar: [
{
text:"新增",
iconCls: 'sys-icon-add',
handler:function() {
addUser();
}
},
{
text:"编辑",
iconCls: 'icon-edit',
handler:function(){
var selected = $('#grid').datagrid('getSelected');
if(null == selected){
$.messager.alert("提示", "您没有选中任何行!");
return;
}
else{
editUser(selected);
}
}
},
{
text:"删除",
iconCls: 'icon-remove',
handler:function() {
}
}
],
pagination:true, //分页属性设置
singleSelect:true,
pageSize: 10,
pageList: [10,20,30,40],
beforePageText: '第',
afterPageText: '页 共 {pages} 页',
displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条记录',
columns:[[
{field:'UId',title:'ID',width:50,align:'center'},
{field:'UName',title:'用户名称',width:200,align:'center'},
{field:'opt',title:'操作',width:70,align:'center',formatter:function(v,r,i){
return "<a href='javascript:delUser("+r.UId+")'><img src='/Content/sys_icons/decline.png' /></a> <a href='javascript:editUser("+r.UId+")'><img src='/Content/sys_icons/disk_edit.png' /></a>";
}}
]]
});
}
}
<table id="grid" data-options="fit:true"></table>
<div id="dialog" style="overflow:hidden"></div>
显示的效果图:
