js自訂分頁

在做項目時不時地會需要自己編寫分頁，現在我把自己用到的分頁粘貼出來供大家參考，歡迎大家給出意見或者建議。

在js檔案中

var intPageSize;$(function() {if($("#pageIndex")){intPageSize = $("#pageSize").val();var indexPage = $("#pageIndex").val();var pageCount = $("#pageCount").val();var intIndexPage = parseInt(indexPage, 10);var intPageCount = parseInt(pageCount, 10);if(intPageCount<=1) {$('#firstPage').attr('disabled', true);$('#perPage').attr('disabled', true);$('#nextPage').attr('disabled', true);$('#lastPage').attr('disabled', true);} else if (intIndexPage <= 1) {$('#firstPage').attr('disabled', true);$('#perPage').attr('disabled', true);} else if (intIndexPage == intPageCount) {$('#nextPage').attr('disabled', true);$('#lastPage').attr('disabled', true);}}});//上一頁function getPerPage() {if($('#perPage').attr('disabled')){return;}var indexPage = $("#pageIndex").val();//var pageCount = $("#pageCount").val();var intIndexPage = parseInt(indexPage, 10);//var intPageCount = parseInt(pageCount, 10);if (intIndexPage > 1) {jumpPage(intIndexPage - 1, intPageSize);} else {// alert("這已經是第一頁了！");}}//下一頁function getNextPage() {if($('#nextPage').attr('disabled')){return;}var indexPage = $("#pageIndex").val();var pageCount = $("#pageCount").val();var intIndexPage = parseInt(indexPage, 10);var intPageCount = parseInt(pageCount, 10);if (intIndexPage < intPageCount) {jumpPage(intIndexPage + 1, intPageSize);} else {// alert("這已經是最後一頁了！（該處待改進）");}}//跳轉到尾頁function getLastPage() {if($('#lastPage').attr('disabled')){return;}var pageCount = $("#pageCount").val();var intPageCount = parseInt(pageCount, 10);jumpPage(intPageCount, intPageSize);}//跳轉到首頁function getFirstPage(){if($('#firstPage').attr('disabled')){return;}jumpPage(1, intPageSize);}//自己輸入跳轉到哪頁function freeJump() {var jumpP = $("#jumpPage").val();var pageCount = $("#pageCount").val();var intJumpPage = parseInt(jumpP, 10);var intPageCount = parseInt(pageCount, 10);if (intJumpPage >= 1 && intJumpPage <= intPageCount) {jumpPage(intJumpPage, intPageSize);} else {alert("需要跳轉的頁面超出了實際範圍");var index = $("#pageIndex").val();$("#jumpPage").val(index);}}

在jsp頁面中需要引用上面的js檔案(分頁部分放在table的最後面)

<tr><td class="DateButtom" height="20" colspan="9"><label style="float: left;">共 <span id = "totalCount" style="color:Red;">${totalCount}</span> 條記錄  </label><label style="float: right;"><span id="firstPage" onclick="getFirstPage()"><a href="#">首頁</a></span> <span id ="perPage" onclick="getPerPage()"><a href="#">上一頁</a></span> <span id ="nextPage" onclick="getNextPage()"><a href="#">下一頁</a></span> <span id="lastPage" onclick="getLastPage()"><a href="#">尾頁</a></span>  頁次：<span id="pageIndex1" style="color:Red;">${pageIndex}</span>/<span id="pageCount1" style="color:Red;">${pageCount}</span>頁  <span style="color:Red;">${pageSize}</span>條記錄/頁  轉到第<input id ="jumpPage" style="height:12px" name="EgvContent" type="text" value="${pageIndex}"  width="5" size="2"/>頁<a href="#" onclick="freeJump()"><img alt="" height="15px" src="${pageContext.request.contextPath}/images/go.gif" style="border:none;"></a><input type="hidden" id="pageIndex" value="${pageIndex}"></input>         <input type="hidden" id="pageCount" value="${pageCount}"></input>        <input type="hidden" id="pageSize" value="${pageSize}"></input>       </label></td></tr>

需要從後台傳到頁面上的資料有（這裡僅指分頁要用到的）:

totalCount　資料總條數

pageIndex　當前第幾頁

pageCount　總頁數

pageSize　每頁顯示的條數

需要用到的一張小圖是　

分頁的效果為