BottStrap分页组件bootStrapPager下载地址:http://www.jq22.com/jquery-info1753
控制器
public class HomeController : Controller
{
public ActionResult Index()
{
BaseDbContent db = new BaseDbContent();
ViewBag.count = db.location.Count(); // 获取数据的总条数
return View();
}
public JsonResult GetIndexData(int currPage, int pageSize)
{
BaseDbContent db = new BaseDbContent();
var list = db.location.OrderBy(r => r.locId).Skip((currPage - 1) * pageSize).Take(pageSize).ToList();
return Json(list);
}
}
视图
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>BottStrap分页组件bootStrapPager测试</title>
<link href="~/bootStrapPager/css/bootstrap.min.css" rel="stylesheet" />
<script src="~/bootStrapPager/js/jquery-1.11.1.min.js"></script>
<script src="~/bootStrapPager/js/bootstrap.js"></script>
<script src="~/bootStrapPager/js/extendPagination.js"></script>
<style type="text/css">
</style>
</head>
<body>
<table id="tb">
<tr><th>编号</th><th>名称</th><th>父编号</th></tr>
</table>
<!--分页按钮-->
<div id="callBackPager"></div>
</body>
</html>
<script type="text/javascript">
var total = '@ViewBag.count';
$(function () {
//进入页面的时候需要调用callBackPagination这个函数,传入当前页,页大小,总页数
callBackPagination(1, 10, total); //参数一:当前页 参数二:页大小 参数三:数据总条数(不需要传递总页数)
})
//这段代码不许要动
function callBackPagination(showCount, limit, totalCount) {
createTable(1, limit, totalCount); //第一次调用(加载第一页数据)
$('#callBackPager').extendPagination({ //根据传入的参数生成分页控件
totalCount: totalCount,
showCount: showCount,
limit: limit,
callback: function (curr, limit, totalCount) {//当点击分页控件页码时会触发此回调函数
createTable(curr, limit, totalCount);
}
});
}
//用的时候只需要写下面这段ajax代码就可以
function createTable(currPage, limit, total) {
$.post("/Home/GetIndexData", { currPage: currPage, pageSize: limit }, function (data) {
$("#tb").empty();
$.each(data, function (k, v) {
$("#tb").append("<tr><td>" + v.locId + "</td><td>" + v.locName + "</td><td>" + v.parentId + "</td></tr>")
})
})
}
</script>