标签：
上一篇测试版的代码我们发现了很多问题，在这一版本中我们将解决。上一版的连接地址：封装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分页插件——可以使用的测试版（β版）
标签：
原文地址：http://www.cnblogs.com/zk3113/p/5823137.html
