序言
本来想自己对这个分页使用做一些总结的，但发现大神们已经总结的很好了。所以给推荐一下。
转自：http://www.cnblogs.com/knowledgesea/archive/2013/01/03/2841554.html
下面是个人测试的列子：
前端代码
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>JsPage</title> <script src="~/Scripts/jquery-1.10.2.min.js"></script> <script src="~/Scripts/jquery.pagination.js"></script> <link href="~/Style/pagination.css" rel="stylesheet" /> <script type="text/javascript"> var pageIndex = 1; //页面索引初始值 var pageSize = 10; //每页显示条数初始化，修改显示条数，修改这里即可 var PageCount = 100; $(document).ready(function () { InitTable(pageIndex); //Load事件，初始化表格数据，页面索引为0（第一页） InitPager(); }); function InitPager() { //分页，PageCount是总条目数，这是必选参数，其它参数都是可选 $("#pager").pagination(PageCount, { callback: PageCallback, //PageCallback() 为翻页调用次函数。 prev_text: "上一页", next_text: "下一页", items_per_page: pageSize, num_edge_entries: 2, //两侧首尾分页条目数 num_display_entries: 3, //连续分页主体部分分页条目数 current_page: pageIndex - 1, //当前页索引 }); } //翻页调用 function PageCallback(index, jq) { InitTable(index + 1); } //请求数据 function InitTable(pageIndex) { $.ajax({ type: "POST", contentType: "application/json; charset=utf-8", url: "/Page/GetPage", dataType: "json", data: "{pageIndex:'" + pageIndex + "',pageSize:'" + pageSize + "'}", //提交两个参数：pageIndex(页面索引)，pageSize(显示条数) success: function (data) { $("#divtest").html(""); var str = ""; $.each(data, function (i, item) { str = str + "<span>" + item + "<span><br />"; }); $("#divtest").append(str); } }); } </script> </head> <body> <div id="divtest"></div> <div id="pager"> </div> </body> </html>
后台代码：
[HttpPost] public JsonResult GetPage(int pageIndex, int pageSize) { IList<string> list = new List<string>(); int n = (pageIndex - 1) * pageSize + 1; for (int i = n; i <= n + pageSize - 1; i++) { list.Add("aaaa" + i); }; return Json(list); }
效果：
