EasyUI算是比较有名的，搜一下网上的资料也比较多，具体的参数，下载地址我就不写了
平常也不怎么写文章，大部分都是代码，有不能运行的可以直接评论回复
有可能遇到的问题：
json数据格式，这个要仔细对下，有错误的话无法正常显示数据
分页的原理：
向后台传递页数、和每页显示的条数，然后用sql语句取出对应的数据，转换为json字符串传到前台
首先，页面视图代码
<script type="text/javascript" src="~/Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.easyui.min.js"></script>
<link rel="stylesheet" href="~/Scripts/easyui.css" type="text/css" />
<link rel="stylesheet" href="~/Scripts/icon.css" type="text/css" />
<table id="test" class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:250px"
>
<thead>
<tr>
<th data-options="field:'GameID',width:100">Product</th>
<th data-options="field:'GameName',width:80,align:'right'">List Price</th>
<th data-options="field:'CompanyName',width:80,align:'right'">Unit Cost</th>
</tr>
</thead>
</table>
<script>
$('#test').datagrid({
url: 'GetGridData',
pagination: true,//分页控件
rownumbers: true,//行号
frozenColumns: [[
{ field: 'ck', checkbox: true }
]],
toolbar: [{
text: '添加',
iconCls: 'icon-add',
handler: function () {
openDialog("add_dialog", "add");
}
}, '-', {
text: '修改',
iconCls: 'icon-edit',
handler: function () {
openDialog("add_dialog", "edit");
}
}, '-', {
text: '删除',
iconCls: 'icon-remove',
handler: function () {
delAppInfo();
}
}],
pageSize: 10, //设置默认分页大小
pageList: [10, 15, 20, 25, 30, 35, 40, 45, 50], //设置分页大小
});
var p = $('#test').datagrid('getPager');
$(p).pagination({
pageSize: 10,//每页显示的记录条数，默认为10
pageList: [5, 10, 15],//可以设置每页记录条数的列表
beforePageText: '第',//页数文本框前显示的汉字
afterPageText: '页 共 11 页',
displayMsg: '当前显示 1 - 11 条记录 共 11 条记录',
onBeforeRefresh:function(){
$(this).pagination('loading');
alert('before refresh');
$(this).pagination('loaded');
},
onChangePageSize: function () {
alert("pagesized changed");
}
});
</script>
//分页sql
//datagrid分页数据格式,sortname为按照哪一个字段排序，
//sortorder为desc、asc，startRecord为第几页，maxRecords为每页显示多少条
public DataTable GetDataSetBySQL(string sql, string sortname, string sortorder, int startRecord, int maxRecords)
{
DataSet ds = new DataSet();
int staRecord = (startRecord - 1) * maxRecords + 1;
int endRecord = (startRecord) * maxRecords + 1;
sql = "SELECT * FROM ( SELECT __tmp.*,ROW_NUMBER() OVER (ORDER BY __tmp." + sortname + " " + sortorder + ") AS RowNo FROM (" + sql;
sql += ") AS __tmp ) AS __tmplist WHERE RowNo>=" + staRecord + " and RowNo<" + endRecord + " ORDER BY RowNo ";
DataTable dt=db.GetDataSet(sql,"d1");
return dt;
}
接下来是把datatable转换成datagrid需要的json数据格式
//datagrid需要的json数据格式,count为sql总的条数
public string DataTableToJson(DataTable dt,int count)
{
StringBuilder jsonBuilder = new StringBuilder();
jsonBuilder.Append("{\"");
jsonBuilder.Append("total\":");
jsonBuilder.Append(count);
jsonBuilder.Append(",");
jsonBuilder.Append("\"rows\"");
jsonBuilder.Append(":[");
for (int i = 0; i < dt.Rows.Count; i++)
{
jsonBuilder.Append("{");
for (int j = 0; j < dt.Columns.Count; j++)
{
jsonBuilder.Append("\"");
jsonBuilder.Append(dt.Columns[j].ColumnName);
jsonBuilder.Append("\":");
jsonBuilder.Append("\"");
jsonBuilder.Append(dt.Rows[i][j].ToString());
jsonBuilder.Append("\"");
jsonBuilder.Append(",");
//jsonBuilder.Append("\",");
}
jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
jsonBuilder.Append("},");
}
jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
jsonBuilder.Append("]");
jsonBuilder.Append("}");
return jsonBuilder.ToString();
}
最后是获取数据的url代码
//rows为每页多少条数据，page为当前页数，datagrid空间post传过来的，直接接收即可
//一个两种方法获取page和rows
public string GetGridData(string rows,string page)
{
int pageSize = Convert.ToInt32(Request["rows"]);
int pageNum = Convert.ToInt32(Request["page"]);
//result为json数据格式测试
string result = "{\"total\":11,\"rows\":[{\"productid\":\"FI-SW-01\",\"productname\":\"Koi\",\"unitcost\":10.00,\"status\":\"P\",\"listprice\":36.50,\"attr1\":\"Large\",\"itemid\":\"EST-1\"}";
result += ",{\"productid\":\"AV-CB-01\",\"productname\":\"Amazon Parrot\",\"unitcost\":92.00,\"status\":\"P\",\"listprice\":63.50,\"attr1\":\"Adult Male\",\"itemid\":\"EST-18\"}";
result += ",{\"productid\":\"AV-CB-01\",\"productname\":\"Amazon Parrot\",\"unitcost\":92.00,\"status\":\"P\",\"listprice\":63.50,\"attr1\":\"Adult Male\",\"itemid\":\"EST-18\"}";
result += ",{\"productid\":\"AV-CB-01\",\"productname\":\"Amazon Parrot\",\"unitcost\":92.00,\"status\":\"P\",\"listprice\":63.50,\"attr1\":\"Adult Male\",\"itemid\":\"EST-18\"}";
result += ",{\"productid\":\"AV-CB-01\",\"productname\":\"Amazon Parrot\",\"unitcost\":92.00,\"status\":\"P\",\"listprice\":63.50,\"attr1\":\"Adult Male\",\"itemid\":\"EST-18\"}";
result += ",{\"productid\":\"AV-CB-01\",\"productname\":\"Amazon Parrot\",\"unitcost\":92.00,\"status\":\"P\",\"listprice\":63.50,\"attr1\":\"Adult Male\",\"itemid\":\"EST-18\"}";
result += ",{\"productid\":\"AV-CB-01\",\"productname\":\"Amazon Parrot\",\"unitcost\":92.00,\"status\":\"P\",\"listprice\":63.50,\"attr1\":\"Adult Male\",\"itemid\":\"EST-18\"}";
result += ",{\"productid\":\"AV-CB-01\",\"productname\":\"Amazon Parrot\",\"unitcost\":92.00,\"status\":\"P\",\"listprice\":63.50,\"attr1\":\"Adult Male\",\"itemid\":\"EST-18\"}";
result += ",{\"productid\":\"AV-CB-01\",\"productname\":\"Amazon Parrot\",\"unitcost\":92.00,\"status\":\"P\",\"listprice\":63.50,\"attr1\":\"Adult Male\",\"itemid\":\"EST-18\"}";
result += ",{\"productid\":\"AV-CB-01\",\"productname\":\"Amazon Parrot\",\"unitcost\":92.00,\"status\":\"P\",\"listprice\":63.50,\"attr1\":\"Adult Male\",\"itemid\":\"EST-18\"}";
result += ",{\"productid\":\"AV-CB-01\",\"productname\":\"Amazon Parrot\",\"unitcost\":92.00,\"status\":\"P\",\"listprice\":63.50,\"attr1\":\"Adult Male\",\"itemid\":\"EST-18\"}";
result += ",{\"productid\":\"AV-CB-01\",\"productname\":\"Amazon Parrot\",\"unitcost\":92.00,\"status\":\"P\",\"listprice\":63.50,\"attr1\":\"Adult Male\",\"itemid\":\"EST-18\"}]}";
//return Json(result,JsonRequestBehavior.AllowGet);
string sql = "select a.GameID,a.GameName,b.CompanyName from GameProfile a LEFT JOIN CompanyProfile b ON a.CompanyId=b.CompanyId";
string sqlcount = " select count(*) from GameProfile ";
DataTable dtrows = db.GetDataSet(sqlcount, "count");
int record = Convert.ToInt32(dtrows.Rows[0][0].ToString());
DataTable dt = GetDataSetBySQL(sql, "gameid", "desc",Convert.ToInt32(page),Convert.ToInt32(rows));
string result2 = DataTableToJson(dt,record);
return result2;
}