Js分页插件，支持页面跳转

这里先给出API:

你只需要提供一个对象涉及以下几项属性，你来设置属性值，通过jq对象链式调用page()以参数形式来加载这个对象，按照参数要求会自动生成分页功能，

参数中pageEvent是可以让你自定义每个按钮按下时触发的事件，实际运用中你可以在事件中用ajax请求来实现分页，具体例子可以参照page.html文件.
建议使用1.8及1.8以前版本的jquery库，因为live()函数可能不支持.引用格式如下:

var o1={
prePage:"上一页",
nextPage:"下一页",
totalItems:100,
pageItems:5,
maxPages:8,
pageEvent:exampleFunc,  //当前选取的jquery对象为参数

};

function exampleFunc(jq){
alert(jq.html());
return jq;
}

$(".a1").page(o1);

　　具体代码如下:

;(function($,window,document,undefined){
var defaults={

prePage:"上一页",
nextPage:"下一页",
totalItems:1,
pageItems:5,
maxPages:8,
pageEvent:exampleFunc,  //当前选取的jquery对象为参数
};

function exampleFunc(jq){
alert(jq.html());
return jq;
}

function Paper($elm,options){

this.$elm=$elm;
this.options=options;
this.init();

};

var temp=[]; //存储html字符串的数组
var items=[]; //存取页数的数组
var a=0;
var teams=0;
var totalPages;  //总页数
var prePage;
var nextPage;

var $elm; //选取的当前dom对象的jquery对象
var endTeam;
var maxPages;
var dispatcher="跳转到";
var endWord="页";
Paper.prototype={
init:function(){
this.renderHtml();
this.bindEvent();

},
renderHtml:function(){
if(this.options.totalItems==0){alert('无内容!');}

var divStr;

if(this.options.totalItems%this.options.pageItems<this.options.pageItems && this.options.totalItems%this.options.pageItems!=0){totalPages=parseInt(this.options.totalItems/this.options.pageItems)+1;}else{totalPages=parseInt(this.options.totalItems/this.options.pageItems);}

teams=parseInt(totalPages/this.options.maxPages); //组数
endTeam=totalPages%this.options.maxPages; //这个是最后一组的个数

var that=this.options.maxPages;
//将所有页组数存进二维数组中
(function(){

for(var i=0;i<teams;i++){
items[i]=[];
for(var j=0;j<that;j++){

items[i][j]=j;
}
}

if(endTeam!=0){

items[teams]=[];
for(var c=0;c<endTeam;c++){

items[teams][c]=c;
}
}

})();

for(var i=0;i<items[0].length;++i){
divStr="<div class='bg'><a href='#'>"+(a*this.options.maxPages+i+1)+"</a></div>";
temp.push(divStr);
}
temp.unshift("<div class='start'>"+this.options.prePage+"</div>");
temp.unshift("<div class='total'>共有"+totalPages+"页</div>");
temp.push("<div class='end'>"+this.options.nextPage+"</div>");
temp.push("<div class='bg2'>"+dispatcher+"</div>");
temp.push("<input class='input' placeholder='1'>");
temp.push("<div class='bg3'>"+endWord+"</div>");

this.$elm.html(temp.join(""));

},
bindEvent:function(){
var Pages=this.options.totalItems/this.options.pageItems; //总页数
var prePage=this.options.prePage;
var nextPage=this.options.nextPage;
var $elm=this.$elm;
var that= this.options;
maxPages=this.options.maxPages;

//点击相应某页
$(".bg").live("click",function(){
that.pageEvent($(this).children("a"));
$(this).children("a").css("color","red");
$(this).siblings().children("a").css("color","#fff");

});

//点击上一页
$(".start").live("click",function(){
if(a>0)a=a-1;
else return;
temp=[];
for(var i=0;i<items[a].length;++i){

divStr="<div class='bg'><a href='#'>"+(a*maxPages+1+i)+"</a></div>";
temp.push(divStr);
}

temp.unshift("<div class='start'>"+prePage+"</div>");
temp.unshift("<div class='total'>共有"+totalPages+"页</div>");
temp.push("<div class='end'>"+nextPage+"</div>");
temp.push("<div class='bg2'>"+dispatcher+"</div>");
temp.push("<input class='input' placeholder='1'>");
temp.push("<div class='bg3'>"+endWord+"</div>");
$elm.html(temp.join(""));
});

//点击下一页
$(".end").live("click",function(){
temp=[]; //temp初始为空数组

if(items[teams]===undefined){  //最后剩余的一组不存在
if(a<teams-1)a=a+1;
else return;
for(var i=0;i<items[a].length;++i){

divStr="<div class='bg'><a href='#'>"+(a*maxPages+1+i)+"</a></div>";
temp.push(divStr);
}}else{
if(a<teams)a=a+1;
else return;
for(var i=0;i<items[a].length;++i){

divStr="<div class='bg'><a href='#'>"+(a*maxPages+1+i)+"</a></div>";
temp.push(divStr);
}};
temp.unshift("<div class='start'>"+prePage+"</div>");
temp.unshift("<div class='total'>共有"+totalPages+"页</div>");
temp.push("<div class='end'>"+nextPage+"</div>");
temp.push("<div class='bg2'>"+dispatcher+"</div>");
temp.push("<input class='input' placeholder='1'>");
temp.push("<div class='bg3'>"+endWord+"</div>");
$elm.html(temp.join(""));
});
//点击跳转
$(".bg2").live("click",function(){

temp=[];
var input=$(".input").val();

if(isNaN(parseInt(input))==true)  a=1;  //字符类型字符串，包括空字符
else{

if(input%maxPages===0)  a=parseInt(input/maxPages);
else{
a=parseInt(input/maxPages)+1;
var c=input%maxPages;
}
}
a=a-1;
for(var i=0;i<items[a].length;++i){

divStr="<div class='bg'><a href='#'>"+((a)*maxPages+1+i)+"</a></div>";
temp.push(divStr);
}

temp.unshift("<div class='start'>"+prePage+"</div>");
temp.unshift("<div class='total'>共有"+totalPages+"页</div>");
temp.push("<div class='end'>"+nextPage+"</div>");
temp.push("<div class='bg2'>"+dispatcher+"</div>");
temp.push("<input class='input' placeholder='1'>");
temp.push("<div class='bg3'>"+endWord+"</div>");
$elm.html(temp.join(""));
});
}
};

$.fn.page=function(options){
var options=$.extend(defaults,options||{});
return new Paper($(this),options);
}

})($,window,document);

　　

这里个给出一个引用例子：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page</title>
<script src="../jquery/jquery.js"></script>
<script src="page.js"></script>
<style>
#cont{position: relative;top:10px;left:50px;}
#a1{position:relative;top:20px;left:10px;}
.bg{width:30px;height:30px;margin-left:10px;background: #456;float:left;margin-top:10px;text-align: center;line-height: 30px;border-radius:5px;}
a{text-decoration: none;color:#fff;}
.start{width:100px;height:30px;float:left;margin-top: 10px;text-align: center;line-height: 30px;color:#fff;background: #456;cursor:pointer;margin-left: 10px;border-radius:5px;}
.end{width:100px;height:30px;float:left;margin-top: 10px;text-align: center;line-height: 30px;color:#fff;background: #456;margin-left:10px;cursor:pointer;border-radius:5px;}
.total{width:120px;height:30px;float:left;margin-top:10px;text-align:center;line-height:30px;background: #456;color: #fff;border-radius:5px;}

.bg2{width:100px;height:30px;margin-left:10px;background: #456;float:left;margin-top:10px;text-align: center;line-height: 30px;border-radius:5px;color: #fff;}
.bg3{width:30px;height:30px;margin-left:10px;background: #456;float:left;margin-top:10px;text-align: center;line-height: 30px;border-radius:5px;color: #fff;}
.input{width:50px;height:25px;margin-left:10px;float:left;margin-top:10px;text-align: center;line-height: 30px;border-radius:10px;}

</style>
</head>
<body>
<div id="cont">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>

</ul>
</div>
<div id="a1"></div>
<!--  <div class=""><span class="bg2">跳转到</span><input class="input" type="text"><span class="bg3">页</span> --><!-- </div> -->
<script>
var o1={
prePage:"上一页",
nextPage:"下一页",
totalItems:100,
pageItems:5,
maxPages:8,
pageEvent:exampleFunc,  //当前选取的jquery对象为参数

};

//一个模拟的json数据对象,这里太长我就简单给出几页数据,建议你用一些框架的列表渲染模式来实现列表生成，这里我手写li是为了让不了解框架的同学也能看到效果。实际运用可以用ajax请求获取这个json对象

var data={
1:[1,2,3,4,5],
2:[6,7,8,9,10],
3:[11,12,13,14,15],
4:[16,17,18,19,20],
5:[21,22,23,24,25],
6:[26,27,28,29,30],
7:[31,32,33,34,35],
8:[36,37,38,39,40]
}

function exampleFunc(jq){
var index=jq.html();
$("#cont ul li:first").html(data[index][0]);
$("#cont ul li:first").next().html(data[index][1]);
$("#cont ul li:first").next().next().html(data[index][2]);
$("#cont ul li:first").next().next().next().html(data[index][3]);
$("#cont ul li:first").next().next().next().next().html(data[index][4]);
}

//这句是关键句
$("#a1").page(o1);
</script>
</body>
</html>

　 模拟的json数据对象,这里太长我就简单给出几页数据,建议你用一些框架的列表渲染模式来实现列表生成，这里我手写li是为了让不了解框架的同学也能看到效果。实际运用可以用ajax请求获取这个json对象　

写下这个插件，花了一些时间，很大的原因是为了培养自己能够熟练造轮子的能力，同时也是锻炼自己Js代码的功力，不管你是为了直接使用，还是学习，都可以下载这个插件的源码，我把代码放到了github上，地址是:https://github.com/Johnharvy/Page-plug-in.我很喜欢Js,是一名入职不久的前端，喜欢钻研Js及前端技术，还有Js越来越多和成熟的运行环境，如果你也是如此，希望在这条路上交您这位朋友，互相学习。有意者可以加我扣扣1667582186(注明博客园)，真心交喜欢Js的朋友，和你一起走向大神之路。