首页 > 代码库 > 封装javascript分页插件——可以使用的测试版（β版）

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

2024-08-11 09:07:49   224人阅读

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

 

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


联系
我们