前言：这个是很久很久自己写的一个 Js 分页条，今天无意中看 自己写的JS类库中 ，发现这个文件，看了下，感觉这个可能以后还用的到他。
所以，先保存起来再说，怕以后都找不到你了。简单的逻辑，简单的实现，不简单的应用。
想想自己很久很久以前，想写个分页，到处网上找第三方控件，还要总是百度，谷歌查怎么用，现在想想，真是天真。
后来，就想自己写个分页条，那时候是写ASPX页面，当时都不太了解ASP.NET运行原理等等的，当时还天真的用了VIEWSTATE来保存数据，
更天真的是，我既然写个不同的页码条数不会写，而是写死，膜拜别人网站各种分页条，天啊！现在想想想死的心都有。
我现在只能感慨一句，什么分页，都是浮云！
好了，回顾了这么久我青涩的过去，该是时候上代码了。
Pagination.Js:
View Code
/*Author:Kuse WuDate:2011-09-04 16:00:00Modified:2011-9-5 09:00:00Tips:说明文档：创建pagination对象参数说明。(json格式)totalCount:总记录数，必填。leftInterval: 当前页码左边相隔页码数。 默认值为：2rightInterval: 当前页码右边相隔页码数。 默认值为：3className:样式类名。默认为:yahoo2 子类命名规则: current prev next disabled statuspageSize:单页记录数。默认为：10callBack:回调函数。获得参数：index，当前页码。CopyRight: Jusoc*/function pagination(data) { var inner = { leftInterval: 2, rightInterval: 3, totalCount: 0, pageSize: 10,className : "yahoo2" }; var pagecount = null; var container = null; function initialize() { if (data) { if (data.totalCount) inner.totalCount = data.totalCount; if (data.callBack) inner.callBack = data.callBack; if (data.rightInterval) inner.rightInterval = data.rightInterval; if (data.leftInterval) inner.leftInterval = data.leftInterval; if (data.pageSize) inner.pageSize = data.pageSize; if (data.className) inner.className = data.className; } pagecount = Math.ceil(inner.totalCount / inner.pageSize); container = document.createElement("div"); container.className = "yahoo2"; } this.pager = function (index) { renderPager(index); } function renderPager(pagenumber) { removeAll(container); //清楚容器内的所有元素 //当没有记录时 if (inner.totalCount <= 0) { container.appendChild(createElement("共 0 页", "span", null, "status")); document.body.appendChild(container); return; } //创建上一页 container.appendChild(renderButton("prev", pagenumber, renderPager)); var startIndex = Math.max(1, (pagenumber - inner.leftInterval)); var endIndex = Math.min(pagecount, (pagenumber + inner.rightInterval)); if (pagenumber < inner.leftInterval + 1) { endIndex = (inner.leftInterval + inner.rightInterval + 1) > pagecount ? pagecount : (inner.leftInterval + inner.rightInterval + 1) } if ((pagenumber + inner.rightInterval) > pagecount) { startIndex = (pagecount - inner.leftInterval - inner.rightInterval) < 1 ? 1 : (pagecount - inner.leftInterval - inner.rightInterval); } //for循环创建 数码 for (var i = startIndex; i < endIndex + 1; i++) { if (pagenumber == i) { container.appendChild(createElement(i,"span",null,"current",i)); } else { //创建元素 container.appendChild(createElement(i,"a",renderPager,"",i)); } } //创建 省略 if ((inner.leftInterval + inner.rightInterval + 1) < pagecount && pagenumber != pagecount) container.appendChild(createElement("...", "span", null, "status")); //创建下一页 container.appendChild(renderButton("next", pagenumber, renderPager)); //创建总页数 container.appendChild(createElement("共" + pagecount + "页", "span", null, "status")); //--------------------------创建文本 var span = createElement("", "span", null, "status"); var inputText = document.createElement("input"); inputText.id = "txtPageIndex"; inputText.type = "text"; inputText.value = pagenumber; inputText.style.cssText = "width:20px; text-align:center;"; span.appendChild(inputText); container.appendChild(span); //----------------------------创建按钮 var span1 = createElement("", "span", null, "status"); var inputBtn = document.createElement("input"); inputBtn.type = "button"; inputBtn.value = "确定"; inputBtn.onclick = function () { goto(pagenumber, "txtPageIndex"); }; span1.appendChild(inputBtn); container.appendChild(span1); //----- callback if (inner.callBack) inner.callBack(pagenumber); document.body.appendChild(container); } //按钮跳转方法 function goto(index, id) { var val = parseInt(document.getElementById(id).value); if (val > pagecount) val = pagecount; if (val < 1) val = 1; renderPager(val); } //创建上一页下一页最后一页第一页 function renderButton(buttonLable, pagenumber, buttonClickCallback) { var destPage = 1; var obj = null; switch (buttonLable) { case "first": //错了 destPage = 1; if (pagenumber == 1) obj = createElement(buttonLable, "span", null, "disabled", destPage); else ob = createElement("第一页", "a", buttonClickCallback, "", destPage); break; case "prev": destPage = pagenumber - 1; if (pagenumber == 1) { obj = createElement("上一页", "span", null, "disabled", destPage); } else { obj = createElement("上一页", "a", buttonClickCallback, "prev", destPage); } break; case "next": destPage = pagenumber + 1; if (pagenumber==pagecount) { obj = createElement("下一页", "span", null, "disabled", destPage); } else { obj = createElement("下一页", "a", buttonClickCallback, "next", destPage); } break; case "last": //错了 destPage = pagecount; if (pagecount == pagenumber) obj = createElement(buttonLable, "span", null, "disabled", destPage); else obj = createElement("最后一页", "a", buttonClickCallback, "", destPage); break; } return obj; } //创建元素 function createElement(text, type, fn, className,destPage) { var o = document.createElement(type); o.className = className; o.innerHTML = text; if (type == "a") { o.href="javascript:void(0)"; if (fn) o.onclick = function () { fn(destPage); }; } return o; } //删除所有节点 function removeAll(obj) { if (obj.childNodes.length > 0) for (var i = obj.childNodes.length - 1; i > -1; i--) { obj.removeChild(obj.childNodes[i]); } } initialize();}
HTML:
var p = new pagination({totalCount:1111,callBack:fn});
p.pager(1);
总结：我表示那时候确实还没更好的了解js的封装，感觉这么调用很别扭。
不过鉴于是之前的写的，还是自己一个人偷偷的笑！嗯，不错，还是写的不错的。
搞定~ho ho~
来源：https://www.cnblogs.com/Jusoc/archive/2011/11/03/2235072.html