1、html+js代碼：
<html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <link rel="stylesheet" type="text/css" href="~/jquery-easyui-1.5.3/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="~/jquery-easyui-1.5.3/themes/icon.css"> <script src="~/jquery-easyui-1.5.3/jquery.min.js"></script> <script src="~/jquery-easyui-1.5.3/jquery.easyui.min.js"></script> </head> <body> <div style="margin-bottom:20px"> 姓名：<input class="easyui-textbox" id="btnSearchName" style="width:150px;height:32px;"> <input type="button" value="搜索" onclick="search()" /> </div> <table id="dg" title="列表" class="easyui-datagrid" style="width:100%;"> </table> <script> var params = {}; $(function () { loadData(params); }); function loadData(params) { $('#dg').datagrid({ url: '/Page/GetPageData',//數據請求地址 method: 'post', pagination: true,//分頁顯示 fitColumns: true,//自動適應寬度 autoRowHeight: true,//自動行高度 loadMsg: '正在加載...', nowrap: true,//設置為true 有利於提高性能 idField: 'Number',//字段標識 rownumbers: true,//顯示行號 singleSelect: true,//只允許選擇一行 pageNumber: 1,//初始化頁面數量 pageSize: 10,//初始化顯示條數 pageList: [10, 20, 30, 40, 60],//分頁列表 columns: [[ { field: 'Name', title: '姓名', width: 50 }, { field: 'Number', title: '工號', width: 50 }, { field: 'action', title: '操作', width: 10, align: 'center', formatter: function (value, row, index) { //row.ID,數據id（主鍵） var a = '<a href="#" onclick="edit(' + row.ID + ')">Edit</a> '; var b = ' <a href="#" onclick="del(' + row.ID + ')">Delete</a>'; return a + b; } } ]], queryParams: params //參數 }); } function search() { var name = $("#btnSearchName").val(); params.name = name; loadData(params); } function edit(id) { alert(id); } function del(id) { alert(id); } </script> </body> </html>
點擊分頁，會往后台傳兩個默認的參數，page表示當前頁索引，rows表示當前頁大小（即每頁多少行數據），其他參數在easyui的datagrid控件的queryParams屬性中
2、后台代碼，這里用的asp.net，如下：
public class PageController : Controller { public ActionResult Index() { return View(); } [HttpPost] public ActionResult GetPageData() { int pageIndex = Convert.ToInt32(HttpContext.Request.Form["page"]); int pageSize = Convert.ToInt32(HttpContext.Request.Form["rows"]); var name = HttpContext.Request.Form["name"]; Dictionary<string, string> dic = new Dictionary<string, string>(); if(!string.IsNullOrEmpty(name)) { dic.Add("Name",name); } int totalCount = 0; List<UserInfo> list = GetData(dic,pageIndex, pageSize, out totalCount); return Json(new { total = totalCount, rows = list }, JsonRequestBehavior.AllowGet); } private List<UserInfo> GetData(Dictionary<string, string> dic,int pageIndex,int pageSize,out int totalCount) { List<UserInfo> list = new List<UserInfo>(); UserInfo u = null; for (int i = 0; i < 55; i++) { u = new UserInfo(); u.ID = 10000 + (i + 1); u.Number = "ZH" + (i + 1).ToString(); u.Name = "Name" + (i + 1).ToString(); list.Add(u); } if (dic != null && dic.Count > 0) { list = list.Where(x => x.Name.Contains(dic["Name"])).ToList(); } totalCount = list.Count; list = list.Take(pageSize * pageIndex).Skip(pageSize * (pageIndex - 1)).ToList(); return list; } public class UserInfo { public int ID { get; set; } public string Number { get; set; } public string Name { get; set; } } }
后台會傳json到前台，json中有兩個參數，total表示數據源總數量，rows表示當前頁的數據。
3、先看效果圖：
