封装javascript分页插件——可以使用的测试版（β版）

Posted 2020-08-05

上一篇测试版的代码我们发现了很多问题，在这一版本中我们将解决。上一版的连接地址：封装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 : 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;
        }
    }
    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();
}

分页的核心方法

在核心方法之中我更换了思考方式：循环的主体不在是所有的分页标签，因为当定位在中间页的时候，有可能会出现两个不可点击的分隔标签。在加上首页和末叶的标签。我们一共要在循环主体内排除4个标签，分别是第一页，第二页，最后一页，最后第二页

所以循环的起始和结束索引就是start和end

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 : 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;
　　}
}

//循环的核心代码

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

function AddFirstOrLast(existLeftDot, existRightDot) {
    //在此方法运行是，当前页面已经存在生成好的标签元素
    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)

参数是两个bool类型，我们之前提到过循环的主体内排除4个标签，分别是第一页，第二页，最后一页，最后第二页。

所以在这里我们要把排除的标签加回来，那么，判定如果存在第三页，那么就增加第二页，不存在，就增加不可点击的分隔标签，末页也是同理

这样分页导航基本上就已经完成了

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>

样式表