function selecPage () {
var n = 0;
$.ajax({
url:"data.json",
async:false,
success:function(e){
n = e.arr;
}
});
return n;
}
function pageAjax (pageNum) {
var arr = selecPage();
var html = '';
var n = pageNum - 1;
arr.forEach(function(v,i){
if(n == i){
html += v;
}
})
$("#box").html(html);
}
pageAjax(1)
var Page = (function(){
var Page = function(obj){
return fn.init(obj);
}
var fn = Page.prototype = {
init:function(obj){
this.pageCount = obj.pageCount;
this.pageSize = obj.pageSize || 7;
this.pageNow = obj.pageNow || 1;
this.containerId = obj.id;
this.container = document.getElementById(this.containerId);
fn.drawPage();
return this;
},
drawPage:function(){
this.container.innerHTML = "";
var front = document.createElement("a");
var next = document.createElement("a");
this.acontainer = document.createElement("sapn");
front.innerHTML = "<";
next.innerHTML = ">";
front.className = "front";
next.className = "next";
this.container.appendChild(front);
$(front).on("click",function(){
fn.frontOrNext(this,true);
fn.inputBox.value = fn.pageNow;
})
$(next).on("click",function(){
fn.frontOrNext(this,false);
fn.inputBox.value = fn.pageNow;
})
this.front = front;
this.next = next;
if(this.pageCount<= this.pageSize){
for( var i=0;i
var a = document.createElement("a");
a.innerHTML = i+1;
$(a).on("click",function(){
Page.alert(this.innerHTML);
Page.select(this,"select");
fn.inputBox.value = this.innerHTML;
})
this.acontainer.appendChild(a);
if(i+1 == this.pageNow){
a.className = "select";
}
}
fn.check();
(this.pageNow == this.pageCount) && (this.next.className += " disable");
(this.pageNow != this.pageCount) && (this.next.className = "next");
}else{
var etc2 = document.createElement("a");
etc2.innerHTML = "...";
etc2.className = "etc";
if(this.pageNow <= this.pageSize -1 ){
for( var i=0;i
var a = document.createElement("a");
a.innerHTML = i+1;
$(a).on("click",function(){
fn.pageNow = this.innerHTML;
Page.alert(this.innerHTML);
Page.select(this,"select");
fn.check();
if(fn.pageNow>=fn.pageSize-1){
fn.reset();
}
etc2.className = "etc";
fn.inputBox.value = this.innerHTML;
})
this.acontainer.appendChild(a);
if(i+1 == this.pageNow){
a.className = "select";
}
}
fn.check();
this.acontainer.appendChild(etc2);
fn.pageN()
}else{
fn.reset();
}
}
var jumpContainer = document.createElement("span");
var span1 = document.createElement("span");
var span2 = document.createElement("span");
var span3 = document.createElement("span");
var span4 = document.createElement("span");
var span5 = document.createElement("span");
var inputBox = document.createElement("input");
var button = document.createElement("input");
inputBox.value = fn.pageNow;
button.value = "確定";
button.type? = "button";
inputBox.className = "box";
button.className? = "BtnSur";
this.inputBox = inputBox;
var _this = this;
$(button).on("click",function(){
var page = fn.inputBox.value.trim();
fn.jump(page);
falBoxInput = page;
if(page >= _this.pageCount){
Page.alert(_this.pageCount);
fn.inputBox.value = _this.pageCount;
}else{
Page.alert(page);
}
var n = $(".select").text();
fn.inputBox.value = n;
})
$(inputBox).on("keyup",function(){
var reg = /^[0-9]*[1-9][0-9]*$/;
(!reg.test(this.value)) && (this.value = "")
})
span1.innerHTML = "共"+this.pageCount+"頁";
span2.innerHTML = "到第";
span4.innerHTML = "頁";
span1.className = "jumpContainer";
span2.className = "jumpContainer";
span4.className = "jumpContainer";
span3.appendChild(inputBox);
span5.appendChild(button);
jumpContainer.appendChild(span1);
jumpContainer.appendChild(span2);
jumpContainer.appendChild(span3);
jumpContainer.appendChild(span4);
jumpContainer.appendChild(span5);
this.container.appendChild(this.acontainer);
this.container.appendChild(next);
this.container.appendChild(jumpContainer);
},
frontOrNext:function(node,isFront){
if(node.className.indexOf("disable")!=-1){
return;
}
if(isFront){
this.pageNow--;
Page.alert(this.pageNow);
}else{
this.pageNow++;
Page.alert(this.pageNow);
}
this.judge();
},
judge:function(){
if(this.pageNow - this.start>2){
this.reset();
}else{
this.drawPage();
}
},
jump:function(page){
if(page>this.pageCount){
this.pageNow = this.pageCount;
this.drawPage();
return;
}
this.pageNow = page;
if(this.pageNow - this.start > 2){
this.reset();
}else{
this.drawPage();
}
},
check:function(){
if(this.pageNow <=1 ){
this.front.className += " disable";
}else{
this.front.className = "front";
}
},
reset:function(){
this.acontainer.innerHTML="";
var a1 = document.createElement("a");
var a2 = document.createElement("a");
var etc1 = document.createElement("a");
var etc2 = document.createElement("a");
a1.innerHTML = "1";
a2.innerHTML = "2";
etc1.innerHTML = "...";
etc2.innerHTML = "...";
etc1.className = etc2.className = "etc";
this.front.className = "front";
$(a1).on("click",function(){
fn.pageNow = this.innerHTML;
Page.alert(this.innerHTML);
Page.select(this,"select");
fn.drawPage();
fn.inputBox.value = this.innerHTML;
return;
})
$(a2).on("click",function(){
fn.pageNow = this.innerHTML;
Page.alert(this.innerHTML);
Page.select(this,"select");
fn.drawPage();
fn.inputBox.value = this.innerHTML;
return;
})
this.acontainer.appendChild(a1);
this.acontainer.appendChild(a2);
this.acontainer.appendChild(etc1);
var start;
var startCount = this.pageCount - (this.pageSize - 2)+1;
start = this.pageNow - Math.ceil((this.pageSize-2)/2)+1;
if(start >= startCount){
start = startCount;
this.isEnd = true;
}else{
this.isEnd = false
}
this.start = start;
var _this = this;
var n = 0;
for( var i = 0 ; i
var a = document.createElement("a");
a.innerHTML = start+i;
$(a).on("click",function(){
fn.pageNow = this.innerHTML;
Page.alert(this.innerHTML);
Page.select(this,"select");
fn.judge();
fn.inputBox.value = this.innerHTML;
})
n = start+i;
this.acontainer.appendChild(a);
if((start+i)== this.pageNow)a.className = "select";
}
(!this.isEnd) && this.acontainer.appendChild(etc2);
(this.pageNow == this.pageCount) && (this.next.className += " disable");
(this.pageNow != this.pageCount) && (this.next.className = "next");
if(n == this.pageCount-1){
this.acontainer.removeChild(etc2);
fn.pageN()
};
if(n <= (this.pageCount-2)){
fn.pageN()
};
},
pageN : function () {
var endPage = document.createElement("a");
endPage.innerHTML = this.pageCount;
this.acontainer.appendChild(endPage);
$(endPage).on("click",function(){
fn.pageNow = this.innerHTML;
Page.alert(this.innerHTML);
Page.select(this,"select");
fn.check();
if(fn.pageNow>=fn.pageSize-1){
fn.reset();
}
fn.inputBox.value = fn.pageNow;
})
}
}
Page.select = function(node,className){
var aArray = fn.acontainer.getElementsByTagName("a"),
aLength =? aArray.length;
for( var i=0;i<aLength;i++ ){
aArray[i].className ="";
}
node.className = className;
}
Page.alert = function(page){
pageAjax(page)
}
return Page;
})();
window.Page = Page;
var pageCountNum = selecPage().length;
Page({
pageCount : pageCountNum,
pageSize : 7,
pageNow : 1,
id : "pageControl"
});
