使用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); }