最实用的jQuery分页插件

在做商城和订单管理的时候，常常会用到分页功能，所以我封装了一个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分页功能汇总进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

• jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
• jquery分页插件jquery.pagination.js使用方法解析
• 一款Jquery 分页插件的改造方法（服务器端分页）
• Jquery 分页插件之Jquery Pagination
• 分享一个自己动手写的jQuery分页插件
• 基于bootstrap3和jquery的分页插件
• asp.net jquery无刷新分页插件(jquery.pagination.js)
• jQuery ajax分页插件实例代码
• Ajax分页插件Pagination从前台jQuery到后端java总结
• 快速掌握jquery分页插件jqPaginator的使用方法