上一篇測試版的代碼我們發(fā)現(xiàn)了很多問題，在這一版本中我們將解決。上一版的連接地址：封裝javascript分頁插件——測試版

最主要的就是修改核心方法：

function initTag() {pageModel.$element.html("")var pageTagDynamic = "";if (pageModel.pageCountTag >= pageModel.pageCount) {pageModel.pageCountTag = pageModel.pageCount}var start = 3;var end = pageModel.pageCountTag - 2;if (pageModel.pageIndex != 1) {start = pageModel.pageIndex - 2 >= 4 ? pageModel.pageIndex - 2 : 3end = pageModel.pageIndex + 3 <= pageModel.pageCount - 2 ? pageModel.pageIndex + 3 : pageModel.pageCount - 2if (end < pageModel.pageCountTag - 2) {end = pageModel.pageCountTag - 2;}if (start > pageModel.pageCount - 7) {start = pageModel.pageCount - 7;}}for (var i = start; i <= end; i++) {pageTagDynamic += stringFormat(pageModel.pageTagTemplate, "page", i, i, i);}pageModel.$element.append(pageTagDynamic);//增加兩側非點擊的間隔符AddFirstOrLast(start != 3, end != pageModel.pageCount - 2)//增加上一頁和下一頁的標簽 AddPreviousOrNext();//設置當前頁標簽樣式 signCurrentPage(); } 分頁的核心方法

在核心方法之中我更換了思考方式：循環(huán)的主體不在是所有的分頁標簽，因為當定位在中間頁的時候，有可能會出現(xiàn)兩個不可點擊的分隔標簽。在加上首頁和末葉的標簽。我們一共要在循環(huán)主體內排除4個標簽，分別是第一頁，第二頁，最后一頁，最后第二頁

所以循環(huán)的起始和結束索引就是start和end

if (pageModel.pageCountTag >= pageModel.pageCount) {

　　//保證總頁數(shù)較少的時候循環(huán)總體就是總頁數(shù)
　　pageModel.pageCountTag = pageModel.pageCount
}
var start = 3;
var end = pageModel.pageCountTag - 2;

//當前頁定位不是首頁的時候

if (pageModel.pageIndex != 1) {

　　//確定循環(huán)的起始和結束索引
　　start = pageModel.pageIndex - 2 >= 4 ? pageModel.pageIndex - 2 : 3
　　end = pageModel.pageIndex + 3 <= pageModel.pageCount - 2 ? pageModel.pageIndex + 3 : pageModel.pageCount - 2

　　//當前頁過小時對結束索引的補齊
　　if (end < pageModel.pageCountTag - 2) {
　　end = pageModel.pageCountTag - 2;
　　}

　　//當前頁過大時對開始索引的補齊
　　if (start > pageModel.pageCount - 7) {
　　start = pageModel.pageCount - 7;
　　}
}

//循環(huán)的核心代碼

for (var i = start; i <= end; i++) {
　　pageTagDynamic += stringFormat(pageModel.pageTagTemplate, "page", i, i, i);
}

function AddFirstOrLast(existLeftDot, existRightDot) {//在此方法運行是，當前頁面已經(jīng)存在生成好的標簽元素var previous = pageModel.$element.children().first();var next = pageModel.$element.children().last();//增加第一頁標簽$(stringFormat(pageModel.pageTagTemplate, "page", 1, 1, 1)).insertBefore(previous);//增加最后一頁標簽$(stringFormat(pageModel.pageTagTemplate, "page", pageModel.pageCount, pageModel.pageCount, pageModel.pageCount)).insertAfter(next);if (existLeftDot) {$(pageModel.pageDotTag).insertBefore(previous)}else {$(stringFormat(pageModel.pageTagTemplate, "page", 2, 2, 2)).insertBefore(previous);}if (existRightDot) {$(pageModel.pageDotTag).insertAfter(next)}else {$(stringFormat(pageModel.pageTagTemplate, "page", pageModel.pageCount - 1, pageModel.pageCount - 1, pageModel.pageCount - 1)).insertAfter(next);} } 增加兩側非點擊的間隔符

AddFirstOrLast(start != 3, end != pageModel.pageCount - 2)

參數(shù)是兩個bool類型，我們之前提到過循環(huán)的主體內排除4個標簽，分別是第一頁，第二頁，最后一頁，最后第二頁。

所以在這里我們要把排除的標簽加回來，那么，判定如果存在第三頁，那么就增加第二頁，不存在，就增加不可點擊的分隔標簽，末頁也是同理

這樣分頁導航基本上就已經(jīng)完成了

function AddPreviousOrNext() {var previous = pageModel.$element.children().first();var next = pageModel.$element.children().last();if (pageModel.pageIndex != 1) {$(pageModel.pageLastTag).insertBefore(previous);}if (pageModel.pageIndex != pageModel.pageCountTag) {$(pageModel.pageNextTag).insertAfter(next);} } 上一頁和下一頁 function signCurrentPage() {$("#page-" + pageModel.pageIndex).addClass("pageSelected"); } 添加當前頁樣式 <style>label {margin: 10px;}.pageSelected a,.page a {text-decoration: none;}.page a {color: black;}.pageSelected a {color: blueviolet;}</style> 樣式表

?

轉載于:https://www.cnblogs.com/zk3113/p/5823137.html

總結

以上是生活随笔為你收集整理的封装javascript分页插件——可以使用的测试版（β版）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。