您的位置：首页 > Web前端 > BootStrap

bootstrap 分页

2016-03-07 12:16 731 查看

@{
Layout = null;
}

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/bootstrap-paginator-master/src/bootstrap-paginator.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="content">
</div>
</div>
<div class="row">
<ul class="pages" pagesize="10"></ul>
</div>
</div>

<script type="text/javascript">

//1.首先获取总条数和每页的页容量
var totalPages;
var pageSize = $(".pages").attr("pageSize");
var options;

var isGetTotalPages = true;
$.get("/Home/GetTotalPages", "", function (data) {
//window.
totalPages = Math.ceil(data.TotalPages / pageSize);
alert(totalPages)
options = {
bootstrapMajorVersion: 3,
alignment: 'center',
currentPage: 1,
totalPages: window.totalPages,
pageUrl: function (type, page, current) {
return "/Home/GetPagesData?page=" + page;
},
onPageClicked: function (event, originalEvent, type, page) {
originalEvent.preventDefault();
originalEvent.stopPropagation();
$.get(originalEvent.target.href, "curPage=" + page + "&PageSize=" + pageSize, function (data) {
if (data.Data.length > 0) {
$(".content").empty();
for (var i = 0; i < data.Data.length; i++) {
$(".content").append("<a href='#'>" + data.Data[i].Title + "</a><br/>");
}
}

});
}
};
$(".pages").bootstrapPaginator(options);
$(".pages li:first a").trigger("click");
});

</script>

<script type="text/javascript">

$(function () {
$.get("/Home/GetPagesData", "curPage=" + 1 + "&PageSize=" + pageSize, function (data) {
if (data.Data.length > 0) {
for (var i = 0; i < data.Data.length; i++) {
$(".content").append("<a href='#'>" + data.Data[i].Title + "</a><br/>");
}
}
});
});
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航