最实用的jQuery分页插件
赵青 人气:0在做商城和订单管理的时候，常常会用到分页功能，所以我封装了一个jQuery的分页插件，该插件主要实现上下翻页，输入数字跳转等功能。
具体实现如下：
输入参数需要当前页码pageNo，总页码totalPage，回调函数callback。
主要的实现有两个函数，一个是根据当前页和总页数生成相应的html的代码，一个是事件绑定及回调函数的执行。
creatHtml函数：
creatHtml:function(){
var me=this;
var content="";
//当前页码
var current=me.options.pageNo;
//总页码
var total=me.options.totalPage;
//当前页码大于1显示向上翻页按钮
if(current > 1){
content += "<a><</a>";
}
//总页数大于7，根据当前页显示省略号，否则显示全部页码
if(total > 7){
if(current < 4){
for(var i=1;i<7;i++){
if(current==i){
content += "<a class='current'>"+i+"</a>";
}else{
content += "<a>"+i+"</a>";
}
}
content += "...";
content += "<a>"+total+"</a>";
}else{
if(current < total - 3){
content += "<a name='1' type='button' class='page num'>1</a>";
content += "...";
for(var i=current-2;i<current+3;i++){
if(current==i){
content += "<a class='current'>"+i+"</a>";
}else{
content += "<a>"+i+"</a>";
}
}
content += "...";
content += "<a>"+total+"</a>";
}else{
content += "<a>1</a>";
content += "...";
for(var i=total-5;i<total+1;i++){
if(current==i){
content += "<a class='current'>"+i+"</a>";
}else{
content += "<a>"+i+"</a>";
}
}
}
}
}else{
for(var i=1;i<total+1;i++){
if(current==i){
content += "<a class='current'>"+i+"</a>";
}else{
content += "<a>"+i+"</a>";
}
}
}
//当前页小于总页数，显示向下翻页按钮
if(current < total){
content += "<a>></a>";
}
//输入跳转
content += " 到第 ";
content += "<input max='3' maxlength='3' value='"+current+"' type='text' />";
content += " 页 ";
content += "<a>Go</a>";
//更新HTML
me.element.html(content);
}
bindEvent函数：
bindEvent:function(){
var me=this;
//分页点击事件
me.element.on('click','a',function(){
var num=$(this).html();
if(num=="<"){//上翻
me.options.pageNo=+me.options.pageNo-1;
}else if(num==">"){//下翻
me.options.pageNo=+me.options.pageNo+1;
}else if(num=="Go"){//输入页码跳转
var ipt=+me.element.find('input').val();
if(ipt&&ipt<=me.options.totalPage&&ipt!=me.options.pageNo){
me.options.pageNo=ipt;
}
}else{//直接跳转
me.options.pageNo=+num;
}
//更新html
me.creatHtml();
//调用回调函数，返回当前页码
if(me.options.callback){
me.options.callback(me.options.pageNo);
}
});
}
将函数封装起来，完整如下：
;(function($,window,document,undefined){
var initDate={
pageNo:1,
totalPage:1,
callback:function(){}
};
function Paging(element,options){
this.element = element;
this.options=options=$.extend(initDate,options||{});
this.init();
}
Paging.prototype={
constructor:Paging,
init:function(){
this.creatHtml();
this.bindEvent();
},
creatHtml:function(){
var me=this;
var content="";
var current=me.options.pageNo;
var total=me.options.totalPage;
if(current > 1){
content += "<a><</a>";
}
if(total > 7){
if(current < 4){
for(var i=1;i<7;i++){
if(current==i){
content += "<a class='current'>"+i+"</a>";
}else{
content += "<a>"+i+"</a>";
}
}
content += "...";
content += "<a>"+total+"</a>";
}else{
if(current < total - 3){
content += "<a name='1' type='button' class='page num'>1</a>";
content += "...";
for(var i=current-2;i<current+3;i++){
if(current==i){
content += "<a class='current'>"+i+"</a>";
}else{
content += "<a>"+i+"</a>";
}
}
content += "...";
content += "<a>"+total+"</a>";
}else{
content += "<a>1</a>";
content += "...";
for(var i=total-5;i<total+1;i++){
if(current==i){
content += "<a class='current'>"+i+"</a>";
}else{
content += "<a>"+i+"</a>";
}
}
}
}
}else{
for(var i=1;i<total+1;i++){
if(current==i){
content += "<a class='current'>"+i+"</a>";
}else{
content += "<a>"+i+"</a>";
}
}
}
if(current < total){
content += "<a>></a>";
}
content += " 到第 ";
content += "<input max='3' maxlength='3' value='"+current+"' type='text' />";
content += " 页 ";
content += "<a>Go</a>";
me.element.html(content);
},
bindEvent:function(){
var me=this;
me.element.on('click','a',function(){
var num=$(this).html();
if(num=="<"){
me.options.pageNo=+me.options.pageNo-1;
}else if(num==">"){
me.options.pageNo=+me.options.pageNo+1;
}else if(num=="Go"){
var ipt=+me.element.find('input').val();
if(ipt&&ipt<=me.options.totalPage&&ipt!=me.options.pageNo){
me.options.pageNo=ipt;
}
}else{
me.options.pageNo=+num;
}
me.creatHtml();
if(me.options.callback){
me.options.callback(me.options.pageNo);
}
});
}
};
$.fn.paging=function(options){
options=$.extend(initDate,options||{});
return new Paging($(this),options);
}
})(jQuery,window,document);
HTML：
<div id="page"></div>
js引用：
$('#page').paging({pageNo:2,totalPage:10,callback:function(cur){
console.log(‘当前页：'+cur);//当前页：2
}});
这里加了一些简单的样式，可以根据具体的ui设计来设计样式。
<style type="text/css">
a{
width: 23px;
height: 23px;
border: 1px solid #dce0e0;
text-align: center;
margin: 0 4px;
cursor: pointer;
display: inline-block;
}
.current{
background-color: #5ac3e7;
}
</style>
github地址：https://github.com/Martian1/jQuery.paging.js
更多精彩内容请点击：jquery分页功能汇总进行学习。
加载全部内容