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

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

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

转载于:https://www.cnblogs.com/zk3113/p/5823137.html

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！