使用js来显示分页功能,必要条件是需要获得总记录数、每页的记录数及当前页的页号。其他的条件为非必要条件。主要代码如下:
var prevPageStatus = false;
var nextPageStatus = true;
var startPage;
var endPage;
var maxPage;
var currentPage;
var recordCount;
var pageSize = 10;
var orderCol;
var orderStyle;
function initPagerData() {
if (recordCount > 0) {
if ((recordCount % pageSize) == 0) {
maxPage = recordCount / pageSize;
} else {
maxPage = Math.ceil(recordCount / pageSize);//取大于其值的最小整数
}
startPage = 1;
currentPage = 1;
orderCol = "CommentDate";
orderStyle = "desc";
if (startPage + 10 >= maxPage) {
endPage = maxPage;
//下一页禁用
nextPageStatus = false;
} else {
endPage = 10;
}
prevPageStatus = false;
document.getElementById("pagerInfo").innerHTML = "共" + recordCount + "篇文章·共" + maxPage + "页";
createPageInfo();
//loadCurrentPageArticles();
} else {
maxPage = 0;
document.getElementById("pagerInfo").innerHTML = "共0篇文章·共0页";
}
}
function selectOrderCol(orderName) {
orderCol = orderName;
fillPageInfo(1);
}
function orderStyleChange() {
if (document.getElementById("chkTimeAsc").checked) {
orderStyle = "asc";
} else {
orderStyle = "desc";
}
fillPageInfo(1);
}
function prevPage() {
nextPageStatus = true;
endPage = startPage - 1;
if (startPage - 10 <= 1) {
startPage = 1;
//上一页禁用
prevPageStatus = false;
} else {
startPage = startPage - 10;
}
fillPageInfo(startPage);
}
function nextPage() {
prevPageStatus = true;
startPage = endPage + 1;
if (endPage + 10 >= maxPage) {
endPage = maxPage;
//下一页禁用
nextPageStatus = false;
} else {
endPage = endPage + 10;
}
fillPageInfo(startPage);
}
function createPageInfo() {
var pageInfo = "";
if (prevPageStatus) {
pageInfo = "<input type='button' id='btnPrevPage' class='A_Style' style='font-size:15px;' title='上一页' onclick='prevPage()' value='…' />";
}
for (var i = startPage; i <= endPage; i++) {
if (i == currentPage) {
pageInfo += "<span class='current'>" + i + "</span>";
} else {
pageInfo += "<input type='button' class='A_Style' title='查看第" + i + "页信息' onclick='fillPageInfo(" + i + ")' value='" + i + "' />";
}
}
if (nextPageStatus) {
pageInfo += "<input type='button' id='btnPrevPage' class='A_Style' style='font-size:18px;' title='下一页' onclick='nextPage()' value='…' />";
}
document.getElementById("pageNavi").innerHTML = pageInfo;
}
function fillPageInfo(newPageNo) {
currentPage = newPageNo;
createPageInfo();
loadCurrentPageArticles();
}
function loadPager() {
var url = "GetArticleCount.ashx?r=" + Math.random();
// 1. 创建XMLHttpRequest组件
var xhr = createXMLHttpRequest();
// 2. 设置回调函数
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var count = xhr.responseText;
if (count > 0) {//IE浏览器
recordCount = count;
} else {
recordCount = 0;
}
initPagerData();
}
};
// 3. 初始化XMLHttpRequest组件
xhr.open("GET", url, true);
xhr.send(null);
}
function createXMLHttpRequest() {
var xmlHttp;
try {
if (window.ActiveXObject) {//如果是IE浏览器
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
else if (window.XMLHttpRequest) {//非IE浏览器,包括360浏览器,Firefox,Opera 8.0+,Safari等
xmlHttp = new XMLHttpRequest();
}
} catch (e) {
}
return xmlHttp;
}
function loadCurrentPageArticles() {
var urlLocation = "ArticlePageData.ashx";
urlLocation = encodeURI(urlLocation);
// 1. 创建XMLHttpRequest组件
var xhr = createXMLHttpRequest();
// 2. 设置回调函数
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById("articlePageInfo").innerHTML = xhr.responseText;
}
};
// 3. 初始化XMLHttpRequest组件
xhr.open("POST", urlLocation, true);
//4. 发送请求
var searchInfo = "pageNo=" + escape(currentPage) + "&orderCol=" + escape(orderCol) + "&orderStyle=" + escape(orderStyle);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(searchInfo);
}