(推荐)jquery.pagination.js分页

时间:2023-03-09 09:01:31
(推荐)jquery.pagination.js分页

序言


本来想自己对这个分页使用做一些总结的,但发现大神们已经总结的很好了。所以给推荐一下。

转自: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 - ) * pageSize + ;
for (int i = n; i <= n + pageSize - ; i++)
{
list.Add("aaaa" + i);
};
return Json(list);
}

效果:

(推荐)jquery.pagination.js分页