<script type="text/javascript">
var curPage = 1;//当前页码
var total;//总页数
$(function () {
loadPage(curPage)
});
function loadPage(page) {
$.get("/API/News/GetByPage.ashx", { currentPage: page }, function (obj) {
total = obj.TotalPage;
var ul = $("#newsList").empty();
$.each(obj.Info, function (i, e) {
var li = $('<li style="color:#494053"> <a href="/HtmlContainer/News/' + e.newsId + '.html">' + e.newsTitle + '</a>' +
'<span style="float:right;">' + formatDate(e.newsAddtime.replace('T', ' '), "yyyy-MM-dd") + '</span> </li>');
li.appendTo(ul);
});
pageBarChange(page);
}, "json");
}
function pageBarChange(page) {
var frontSpac = 5,totalSpac=9;
curPage = page;//parseInt($("#pageNum").val()) + 1;
//$("#pageNum").val(curPage);
var start = 1;
if ((curPage - frontSpac) > 1 && (total - curPage) > frontSpac) {
start = curPage - frontSpac;
}
else if (total - curPage <= frontSpac) {
start = total - totalSpac;
}
var html = '<a href="#" onclick="prev()"> << </a>';
for (var i = start; i <= start + totalSpac; i++) {
if (i == curPage) {
html += '<a class="current">' + i + '</a>';
continue;
}
html += ' <a class="pageNum" href="javascript:void(0)" relid=' + i + '>' + i + '</a>';
}
//加载最后一个按钮的情况
if (total - curPage <= frontSpac) {
var temp = (curPage + 1) > total ? total : (curPage + 1);
html += ' <a class="pageNum" href="javascript:void(0)" relid=' + temp + '> </a><a onclick="next()" href="javascript:void(0)"> >> </a>';
}
else {
html += '... <a class="pageNum" href="javascript:void(0)" relid=' + total + '>' + total + '</a> <a onclick="next()" href="javascript:void(0)"> >> </a>';
}
$("#pageBar").empty().append($(html));
$("#pageBar .pageNum").bind("click", function () {
var page1 = parseInt($(this).attr("relid"));
loadPage(page1);
// pageBarChange(page1);
});
}
function prev() {
if ((curPage - 1) <= 0) {
return;
}
loadPage(--curPage);
// pageBarChange(--curPage);
}
function next() {
if ((curPage + 1) > 18) {
return;
}
loadPage(++curPage);
// pageBarChange(++curPage);
}
</script>效果：
页码分页的前端写法