easyui datagrid分页参数data-options=" loadMsg: '正在努力为您加载数据',
method:'get',
fitColumns:false,
multiple: true,
rownumbers:true,
pagination:true,
pageSize: 10,
pageList: [10, 20, 30] } "js脚本调用中 会加载数据，如：$("#kidsMCB").datagrid('reload', 'Customer/CustomerExec.ashx');奇怪的是，后台数据传来后显示很正常，按默认10分页了，没有问题，这时侯选择按20条显示，就不对了，还是显示当前10条，但我调试显示20条数据确实发送到前台响应了，如图：
更怪的是，往后翻一页，显示的确是21-40的正常数据，但选择<上一页，却数据又不变了，仍然是21-40的数据
（但页数显示是第一页），如果此时换成10显示，马上正常，无论前翻或后翻都正常。
method:'get',
fitColumns:false,
multiple: true,
rownumbers:true,
pagination:true,
pageSize: 10,
pageList: [10, 20, 30] } "js脚本调用中 会加载数据，如：$("#kidsMCB").datagrid('reload', 'Customer/CustomerExec.ashx');奇怪的是，后台数据传来后显示很正常，按默认10分页了，没有问题，这时侯选择按20条显示，就不对了，还是显示当前10条，但我调试显示20条数据确实发送到前台响应了，如图：
更怪的是，往后翻一页，显示的确是21-40的正常数据，但选择<上一页，却数据又不变了，仍然是21-40的数据
（但页数显示是第一页），如果此时换成10显示，马上正常，无论前翻或后翻都正常。
直接在data-options里写url:Customer/CustomerExec.ashx
前端：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href="../Scripts/jquery-easyui-1.4/themes/default/easyui.css" rel="stylesheet" />
<link href="../Scripts/jquery-easyui-1.4/themes/icon.css" rel="stylesheet" />
</head>
<body>
<table id="tt" class="easyui-datagrid" style="width:700px;height:350px"
data-options="url:'datagrid_getdata.ashx',
title:'Load Data',
iconCls:'icon-save', pageList:[10, 20, 30],
rownumbers:'true', pagination:true">
<thead>
<tr>
<th field="productid" width="120">Product ID</th>
</tr>
</thead>
</table>
</body>
</html>
<script src="../Scripts/jquery-easyui-1.4/jquery.min.js"></script>
<script src="../Scripts/jquery-easyui-1.4/jquery.easyui.min.js"></script>
datagrid_getdata.ashx：
<%@ WebHandler Language="C#" Class="datagrid_getdata" %>using System;
using System.Web;public class datagrid_getdata : IHttpHandler
{ public void ProcessRequest(HttpContext context)
{
int intPageSize = int.Parse(context.Request["rows"] == null ? "10" : context.Request["rows"]);
int intCurrentPage = int.Parse(context.Request["page"] == null ? "0" : context.Request["page"]);
int totalCount = 100;
string json = "";
int start = intPageSize * (intCurrentPage - 1);
for (int i = 0; i < intPageSize; i++)
{
json += string.Format("{{\"productid\":\"{0}\"}},", i + start + 1);
if (i + start + 1 == totalCount)
{
break;
}
}
json = "[" + json.TrimEnd(',') + "]";
string result = "{\"total\":" + totalCount + ", \"rows\":" + json + "}";
context.Response.Write(result);
} public bool IsReusable
{
get
{
return false;
}
}}
var qParams = { mode: 'Query', hfjia: $("#<%=hfjia.ClientID %>").val(), sfz: $("#sfz").val() }; //取得查询参数
var oldRowIndex;
var opt = $("#grid");
opt.datagrid({
width: '780',
height: '440',
nowrap: false,
striped: true,
fitColumns: true,
singleSelect: true,
queryParams: qParams, //参数
url: '../Service/ServiceHanlder.ashx',
//idField: 'id', //主索引
//frozenColumns: [[{ field: 'ck', checkbox: true}]],
pageSize: 20,
pageList: [20, 25, 30],
pagination: true, //是否启用分页
rownumbers: true, //是否显示列数 onClickRow: function (rowIndex) {
if (oldRowIndex == rowIndex) {
opt.datagrid('clearSelections', oldRowIndex);
}
var selectRow = opt.datagrid('getSelected');
oldRowIndex = opt.datagrid('getRowIndex', selectRow);
},
columns: [[
{
title: "浏览档案", width: 20, align: "center", formatter: function (value, rowData, rowIndex) {
return "<font onclick=searchDA('" + rowData.PersonIdNum + "'); color='blue' > 查看档案 </font>";
}
},
{ field: 'DAGInPosition', title: "档案位置", width: 40, align: "center" },
{ field: 'PersonIdNum', title: "身份证号", width: 80, align: "center" },
{ field: 'PersonName', title: "姓名", width: 40, align: "center" },
{ field: 'PersonSex', title: "性别", width: 30, align: "center" },
{ field: 'DAId', title: "档案编号", width: 60, align: "center" }
// { field: 'DAGInOrg', title: "业务经办机构", width: 60, align: "center" }
]]
}).datagrid("getPager").pagination({
beforePageText: '第', //页数文本框前显示的汉字
afterPageText: '页/{pages}页',
displayMsg: '共{total}条记录',
onBeforeRefresh: function () {
return true;
}
});
});
粘贴复制过来的 注意：设置每页显示多少条在设置datagrid属性的时候就设置， onBeforeRefresh: function () {
return true; } 这个事件一定要写
后台分页查询的语句是正确的，查询的结果也是正缺的。
但DataGrid显示过了几页就会重复显示，需要怎么才能解决呢？
{
var users = InitialData(); return Json(new { total = users.Count, rows = users.Skip((page - 1) * rows).Take(rows) }, JsonRequestBehavior.AllowGet);
}
public List<UserModel> InitialData()
{
List<UserModel> list = new List<UserModel>();
for (int i = 1; i <= 300; i++)
{
UserModel user = new UserModel() { ID = i, UName = "名字" + i };
list.Add(user);
}
return list;
}
<div>
<table id="dg"></table>
<script type="text/javascript">
$('#dg').datagrid({
url: '/Default/getJson',
fitColumns: true,
rownumbers: true,
pagination: true, //分页属性设置
singleSelect: true,
pageNumber: 1,
pageSize: 10,
pageList: [10, 20, 30, 40],
columns: [[
{ field: 'UId', title: 'ID', width: 50, align: 'center' },
{ field: 'UName', title: '用户名称', width: 200, align: 'center' }
]], }); </script>
</div>