多个datatable共存造成多个表格的checkbox都被选中


Posted in Javascript onJuly 11, 2013

【问题原因】
这个应该是 jquery.datatable 控件本身的一个缺陷。
该控件中的checkbox小插件的id是写死的,所以当有多个datatable引用到一个页面中的时候,全选事件会匹配全部的datatable,所以造成全部多个表格的checkbox被都被选中。

【解决方法】
所以最好是修改jquery.datatable控件,给生成的每个datatable下的checkbox赋 予不同的id,因为datatable的id是不一样的,所以可以把 datatable的id作为 checkbox的前缀组成一个唯一的id 。 具体这个checkbox的调用事件也需要同步 替换成这个新id,进行事件的调用。
[修改文件]
jqurey.datatable.ext.js (v0.0.1)

1. init方法修改:

$("#"+options.select_table).find('thead tr th:first-child') 
.prepend('<input type="checkbox" value="CHK_ALL" id=“chk_all" />'); 
==> 
$("#"+options.select_table).find('thead tr th:first-child') 
.prepend('<input type="checkbox" value="CHK_ALL" id="'+options.select_table+'_chk_all" />');

2.subscribeAllChk方法修改:
$("#chk_all").click(function(){ 
==> 
$("#"+$.fn.datatable_ext.defaults.select_table+"_chk_all").click(function(){

3.subscribeChk方法修改:
if(checked_chk_num == curr_page_chk_num){ 
$("#chk_all").attr('checked', 'checked'); 
}else{ 
$("#chk_all").removeAttr('checked'); 
} 
==> 
if(checked_chk_num == curr_page_chk_num){ 
$("#"+$.fn.datatable_ext.defaults.select_table+"_chk_all").attr('checked', 'checked'); 
}else{ 
$("#"+$.fn.datatable_ext.defaults.select_table+"_chk_all").removeAttr('checked'); 
}
Javascript 相关文章推荐
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
Oct 01 Javascript
js 表单验证方法(实用)
Apr 28 Javascript
JavaScript DOM学习第四章 getElementByTagNames
Feb 19 Javascript
常用jQuery选择器总结
Jul 11 Javascript
让IE8浏览器支持function.bind()方法
Oct 16 Javascript
常用DOM整理
Jun 16 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
Oct 10 Javascript
深入理解 webpack 文件打包机制(小结)
Jan 08 Javascript
javascript标准库(js的标准内置对象)总结
May 26 Javascript
jQuery判断自定义属性data-val用法示例
Jan 07 jQuery
JavaScript JMap类定义与使用方法示例
Jan 22 Javascript
微信小程序实现点击导航条切换页面
Nov 19 Javascript
JS 添加千分位与去掉千分位的示例
Jul 11 #Javascript
在js文件中如何获取basePath处理js路径问题
Jul 10 #Javascript
使用闭包对setTimeout进行简单封装避免出错
Jul 10 #Javascript
js Map List 遍历使用示例
Jul 10 #Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
Jul 10 #Javascript
JS下拉框内容左右移动效果的具体实现
Jul 10 #Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
Jul 10 #Javascript
You might like
网站用php实现paypal整合方法
2010/11/28 PHP
批量去除PHP文件中bom的PHP代码
2012/03/13 PHP
THINKPHP2.0到3.0有哪些改进之处
2015/01/04 PHP
Thinkphp 空操作、空控制器、命名空间(详解)
2017/05/05 PHP
js 小数取整的函数
2010/05/10 Javascript
基于jQuery的试卷自动排版系统实现代码
2011/01/06 Javascript
js实现addClass,removeClass,hasClass的函数代码
2011/07/13 Javascript
js加入收藏以及使用Jquery更改透明度
2014/01/26 Javascript
自己封装的javascript事件队列函数版
2014/06/12 Javascript
js中通过父级进行查找定位元素
2014/06/15 Javascript
Javascript中3种实现继承的方法和代码实例
2014/08/12 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
2015/09/17 Javascript
jQuery与Ajax以及序列化
2016/02/01 Javascript
BootStrap实现邮件列表的分页和模态框添加邮件的功能
2016/10/13 Javascript
微信小程序(应用号)开发新闻客户端实例
2016/10/24 Javascript
浏览器调试动态js脚本的方法(图解)
2018/01/19 Javascript
vue计算属性和监听器实例解析
2018/05/10 Javascript
vue打开子组件弹窗都刷新功能的实现
2020/09/21 Javascript
[01:32]2016国际邀请赛中国区预选赛IG战队首日赛后采访
2016/06/27 DOTA
[09:37]2018DOTA2国际邀请赛寻真——不懈追梦的Team Serenity
2018/08/13 DOTA
python编码总结(编码类型、格式、转码)
2016/07/01 Python
浅谈numpy中linspace的用法 (等差数列创建函数)
2017/06/07 Python
使用python将图片按标签分入不同文件夹的方法
2018/12/08 Python
Python django框架应用中实现获取访问者ip地址示例
2019/05/17 Python
python网络编程 使用UDP、TCP协议收发信息详解
2019/08/29 Python
python 实现多线程下载m3u8格式视频并使用fmmpeg合并
2019/11/15 Python
美国最受欢迎的度假租赁网站:VRBO
2016/08/02 全球购物
联想台湾官网:Lenovo TW
2018/05/09 全球购物
SmartBuyGlasses意大利:购买太阳镜、眼镜和隐形眼镜
2018/11/20 全球购物
Perfume’s Club美国官网:西班牙第一家在线美容店
2020/06/10 全球购物
中科软笔试题和面试题
2014/10/07 面试题
生日宴会主持词
2014/03/20 职场文书
上班迟到检讨书300字
2014/10/18 职场文书
党支部2014年度工作总结
2014/12/04 职场文书
大学生年度个人总结
2015/02/15 职场文书
JS封装cavans多种滤镜组件
2022/02/15 Javascript