前言

最近分页功能使用的比较多,所以从网上下载个jquery分页插件来使用,

之前用的都挺好的,直到昨天出现了逻辑问题,反复查看自己的代码,最后发现是点击页码后执行了多个点击事件。最后只有自己查看源码在做修改。

场景

在同一个页面里多次初始化分页插件,之后点击分页页码时就会出错,原因是:点击后调用多个点击事件,最先调用的点击事件更改了当前页码,之后调用的点击事件使用了更改后的错误的当前页码

解决方法

  • 每次初始化之前让页面重载以清除之前注册的点击事件(然而此种做法弊端太多,不适用)
  • 每次初始化之前解除绑定事件,这就需要查看插件源码了

源码

(function($){
var ms = {
init:function(obj,args){
return (function(){
ms.fillHtml(obj,args);
ms.bindEvent(obj,args);
})();
},
//填充html
fillHtml:function(obj,args){
return (function(){
obj.empty();
//上一页
if(args.current > 1){
obj.append('<a href="javascript:;" class="prevPage">上一页</a>');
}else{
obj.remove('.prevPage');
obj.append('<span class="disabled">上一页</span>');
}
//中间页码
if(args.current != 1 && args.current >= 4 && args.pageCount != 4){
obj.append('<a href="javascript:;" class="tcdNumber">'+1+'</a>');
}
if(args.current-2 > 2 && args.current <= args.pageCount && args.pageCount > 5){
obj.append('<span>...</span>');
}
var start = args.current -2,end = args.current+2;
if((start > 1 && args.current < 4)||args.current == 1){
end++;
}
if(args.current > args.pageCount-4 && args.current >= args.pageCount){
start--;
}
for (;start <= end; start++) {
if(start <= args.pageCount && start >= 1){
if(start != args.current){
obj.append('<a href="javascript:;" class="tcdNumber">'+ start +'</a>');
}else{
obj.append('<span class="current">'+ start +'</span>');
}
}
}
if(args.current + 2 < args.pageCount - 1 && args.current >= 1 && args.pageCount > 5){
obj.append('<span>...</span>');
}
if(args.current != args.pageCount && args.current < args.pageCount -2 && args.pageCount != 4){
obj.append('<a href="javascript:;" class="tcdNumber">'+args.pageCount+'</a>');
}
//下一页
if(args.current < args.pageCount){
obj.append('<a href="javascript:;" class="nextPage">下一页</a>');
}else{
obj.remove('.nextPage');
obj.append('<span class="disabled">下一页</span>');
}
})();
},
//绑定事件
bindEvent:function(obj,args){
return (function(){
obj.on("click","a.tcdNumber",function(){
var current = parseInt($(this).text());
ms.fillHtml(obj,{"current":current,"pageCount":args.pageCount});
if(typeof(args.backFn)=="function"){
args.backFn(current);
}
});
//上一页
obj.on("click","a.prevPage",function(){
var current = parseInt(obj.children("span.current").text());
ms.fillHtml(obj,{"current":current-1,"pageCount":args.pageCount});
if(typeof(args.backFn)=="function"){
args.backFn(current-1);
}
});
//下一页
obj.on("click","a.nextPage",function(){
var current = parseInt(obj.children("span.current").text());
ms.fillHtml(obj,{"current":current+1,"pageCount":args.pageCount});
if(typeof(args.backFn)=="function"){
args.backFn(current+1);
}
});
})();
}
}
$.fn.createPage = function(options){
var args = $.extend({
pageCount : 15,
current : 1,
backFn : function(){}
},options);
$(this).addClass("component-page");
ms.init(this,args); }
})(jQuery);

可以看到在绑定事件时使用的是jquery里的on绑定,同时使用了匿名函数;而on绑定属于DOM2级事件绑定,DOM2级事件必须使用removeEventListener来解绑,在jquery里对应的就是off事件

不过值得注意的是解绑时传递的参数必须和绑定时的参数相同,插件中使用匿名函数所以无法解绑。

修改

既然无法解绑那就对插件源码进行修改

思路 :把匿名事件提取出去,同时使用函数名来替代。在绑定之前先进行解绑,可以在bindEvent里进行解绑,不过不符合单一职责原则,所以给ms对象添加一个解绑属性 unbindEvent,在调用bindEvent之前调用 unbindEvent

修改后的代码

(function($){
var ms = {
init:function(obj,args){
//使用parData属性来接受参数,使得参数在提取出来的函数中使用
ms.parData.obj = obj;
ms.parData.args = args; return (function(){
ms.fillHtml(obj,args);
ms.unbindEvent(obj, args);
ms.bindEvent(obj,args);
})();
},
// 接受参数的属性
parData: { },
//填充html
fillHtml:function(obj,args){
return (function(){
obj.empty();
//上一页
if(args.current > 1){
obj.append('<a href="javascript:;" class="prevPage">上一页</a>');
}else{
obj.remove('.prevPage');
obj.append('<span class="disabled">上一页</span>');
}
//中间页码
if(args.current != 1 && args.current >= 4 && args.pageCount != 4){
obj.append('<a href="javascript:;" class="tcdNumber">'+1+'</a>');
}
if(args.current-2 > 2 && args.current <= args.pageCount && args.pageCount > 5){
obj.append('<span>...</span>');
}
var start = args.current -2,end = args.current+2;
if((start > 1 && args.current < 4)||args.current == 1){
end++;
}
if(args.current > args.pageCount-4 && args.current >= args.pageCount){
start--;
}
for (;start <= end; start++) {
if(start <= args.pageCount && start >= 1){
if(start != args.current){
obj.append('<a href="javascript:;" class="tcdNumber">'+ start +'</a>');
}else{
obj.append('<span class="current">'+ start +'</span>');
}
}
}
if(args.current + 2 < args.pageCount - 1 && args.current >= 1 && args.pageCount > 5){
obj.append('<span>...</span>');
}
if(args.current != args.pageCount && args.current < args.pageCount -2 && args.pageCount != 4){
obj.append('<a href="javascript:;" class="tcdNumber">'+args.pageCount+'</a>');
}
//下一页
if(args.current < args.pageCount){
obj.append('<a href="javascript:;" class="nextPage">下一页</a>');
}else{
obj.remove('.nextPage');
obj.append('<span class="disabled">下一页</span>');
}
})();
}, //函数部分,注意其中的参数修改了
fun: {
numEvent: function(){
var current = parseInt($(this).text());
ms.fillHtml(ms.parData.obj,{"current":current,"pageCount":ms.parData.args.pageCount});
if(typeof(ms.parData.args.backFn)=="function"){
ms.parData.args.backFn(current);
}
},
prevEvent: function(){
var current = parseInt(ms.parData.obj.children("span.current").text());
ms.fillHtml(ms.parData.obj,{"current":current-1,"pageCount":ms.parData.args.pageCount});
if(typeof(ms.parData.args.backFn)=="function"){
ms.parData.args.backFn(current-1);
}
},
nextEvent: function(){
var current = parseInt(ms.parData.obj.children("span.current").text());
ms.fillHtml(ms.parData.obj,{"current":current+1,"pageCount":ms.parData.args.pageCount});
if(typeof(ms.parData.args.backFn)=="function"){
ms.parData.args.backFn(current+1);
}
}
},
// 解除绑定事件
unbindEvent: function(obj, args) {
return (function(){
obj.off("click","a.tcdNumber",ms.fun.numEvent);
//上一页
obj.off("click","a.prevPage",ms.fun.prevEvent);
//下一页
obj.off("click","a.nextPage",ms.fun.nextEvent);
})();
},
//绑定事件
bindEvent:function(obj,args){
return (function(){
obj.on("click","a.tcdNumber",ms.fun.numEvent);
//上一页
obj.on("click","a.prevPage",ms.fun.prevEvent);
//下一页
obj.on("click","a.nextPage",ms.fun.nextEvent);
})();
}
}
$.fn.createPage = function(options){
var args = $.extend({
pageCount : 15,
current : 1,
backFn : function(){}
},options);
$(this).addClass("component-page");
ms.init(this,args); }
})(jQuery);

插件使用方式

引入jquery,引入插件(在jquery之后)

编写初始化代码

// commonPage 是页面中的一个元素,用来承载分页部分
$(".commonPage").createPage({
pageCount: Number(count), //总页数,除非是你自己写在这里的数字,否则建议使用Number把它转换成数字
current: Number(current), // 当前页码
backFn: function(p){
//回掉函数,p为点击的页码数 比如点击2则p为2
console.log(p); }
});

特别说明分页样式需要自己写,下面贴出我的样式

/* 分页组件中的样式,component-page是分页插件自动添加上去的类名*/
.component-page a {
text-decoration: none;
} .component-page a:hover {
text-decoration: none;
} .component-page {
padding: 15px 20px;
text-align: left;
color: #ccc;
text-align: center;
} .component-page a {
display: inline-block;
color: #428bca;
display: inline-block;
height: 25px;
line-height: 25px;
padding: 0 10px;
border: 1px solid #ddd;
margin: 0 2px;
border-radius: 4px;
vertical-align: middle;
} .component-page a:hover {
text-decoration: none;
border: 1px solid #428bca;
} .component-page span.current {
display: inline-block;
height: 25px;
line-height: 25px;
padding: 0 10px;
margin: 0 2px;
color: #fff;
background-color: #428bca;
border: 1px solid #428bca;
border-radius: 4px;
vertical-align: middle;
} .component-page span.disabled {
display: inline-block;
height: 25px;
line-height: 25px;
padding: 0 10px;
margin: 0 2px;
color: #bfbfbf;
background: #f2f2f2;
border: 1px solid #bfbfbf;
border-radius: 4px;
vertical-align: middle;
}

效果图

jquery分页插件的修改的更多相关文章

  1. 一个强大的jquery分页插件

    点击这里查看效果 这个分页插件使用方便,引用keleyidivpager.js和keleyidivpager.css文件,然后在htm(或者php,aspx,jsp等)页面中对分页总数,参数名,前缀后 ...

  2. 21个很棒的jQuery分页插件下载

    分页是指将一个大内容划分为各种不同的页面,因此网站的分页是一个很重要的部分,必须让内容有组织性和易于访问.分页有各两种不同的方式,手动跟自动.最受欢迎简单和广泛的方法是jQuery插件.下面我们收集了 ...

  3. jQuery 分页插件 jqPagination的使用

    jqPagination 是一个简单易用的轻量级 jQuery分页插件,其使用了 HTML5 和 CSS3 技术来实现.此插件提供了几个参数设置选项,通过简单的配置即可生成分页控件.此外,它的外观样式 ...

  4. Jquery 分页插件 Jquery Pagination

    Jquery 分页插件 Jquery Pagination 分页插件来说,我觉得适用就行,尽量简单然后能够根据不同的应用场景能够换肤.展现形式等. 对于初学者想写分页插件的同学,也可以看下源码,代码也 ...

  5. jQuery分页插件(jquery.page.js)的使用

    效果描述: 不用分页即可显示的jQuery插件 jQuery分页插件——jQuery.page.js用法很简单,效果很棒   1.前端   首先html的head中引入相关css与js <lin ...

  6. 20个jQuery分页插件和教程

    1.客户端的jQuery 分页插件jPages jPages 是一个客户端的分页插件,但提供很多特性例如自动翻页.键盘和滚动浏览,延迟显示以及完全可定制的导航面板. Read More Demo 2. ...

  7. 自己diy一个jquery分页插件

    js基础学习过程中,期间经历换工作的各种面试,很多面试官问过:有没有写过jquery插件?等类似问题. 就个人而言,关于jquery插件的文章确实看过不少,但是一直没有动手写一个,一是不想在目前学习j ...

  8. 分享一个Jquery 分页插件 Jquery Pagination

    分页插件来说,我觉得适用就行,尽量简单然后能够根据不同的应用场景能够换肤.展现形式等. 对于初学者想写分页插件的同学,也可以看下源码,代码也挺简单明了的,也助于自己写个小插件. 不过我比较懒,一般直接 ...

  9. JQuery分页插件封装(源码来自百度,自己封装)

    最近由于项目的需要,做了一个基于JQuery的表格分页插件封装,部分源码来源百度,经由自己封装完成. 下面是具体代码和说明,仅供参考.第一步可以先将我的HTML,CSS,JS这三部分的代码创建好后先运 ...

随机推荐

  1. 20170305Meetup Git、heroku drop db

    Rails中,给link_to添加上action和class样式,内部文本 <%= link_to product_path(product),{ :controller => 'cont ...

  2. wemall app商城源码中基于JAVA的绑定和处理fragments和viewpager之间的逻辑关系代码

    wemall doraemon是Android客户端程序,服务端采用wemall微信商城,不对原商城做任何修改,只需要在原商城目录下上传接口文件即可完成服务端的配置,客户端可随意定制修改.本文分享其中 ...

  3. CCF2014093字符串匹配(C语言版)

    问题描述 给出一个字符串和多行文字,在这些文字中找到字符串出现的那些行.你的程序还需支持大小写敏感选项:当选项打开时,表示同一个字母的大写和小写看作不同的字符:当选项关闭时,表示同一个字母的大写和小写 ...

  4. SQL-ROW_NUMBER() OVER函数的基本用法(源码案例)

    SELECT SUM(t.AdjustedBalance) AS Allqmye FROM ( SELECT * FROM ( SELECT ROW_NUMBER() OVER ( PARTITION ...

  5. 详解JDBC连接数据库

    一.概念 1. 为了能让程序操作数据库,对数据库中的表进行操作,每一种数据库都会提供一套连接和操作该数据库的驱动,而且每种数据库的驱动都各不相同,例如mysql数据库使用mysql驱动,oracle数 ...

  6. 介绍CPU,内存,硬盘,指令以及他们之间的关系

    CPU:CPU,又称CPU芯片,中央处理器.是计算机上最重要的集成电路,位于计算机的主板上面,其主要任务是从主存上面提取指令和对指令进行执行,CPU包括运算逻辑部件.寄存器部件,运算器和控制部件等.C ...

  7. (转)centos6.5安装VNC

    在Linux下用VNC远程桌面是个很不错的玩意.但在CentOS中默认没有安装VNC的.可以用下面语句查询,如果出现下面情况说明没有安装vnc #rpm -q tigervnc tigervnc-se ...

  8. ATL dll注册失败

    “生成”->“生成解决方案”或“重新生成解决方案”,在注册时,报错:regisvr32 /r/c " C:\Users\Administrator\Desktop\复件DrvWater ...

  9. B/S(Web)实时通讯解决方案

    B/S的实时通讯实现起来比较麻烦,因为http协议是无状态的,导致一些实时消息通知和聊天等功能比较难以实现,本文主要简述几种自己之前常用的几种方式. 1.传统的HTTP协议是无状态的 传统的HTTP协 ...

  10. python之pymysql模块学习(待完善...)

    pymysql介绍 pymysql是在python3.x版本中用于连接mysql服务器的一个库.python2中则使用mysqldb. 安装方法: pip install pymysql 使用实例: ...