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

封装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 : 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分页插件——可以使用的测试版(β版)