多个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高级程序设计 阅读笔记(十二) js内置对象Math
Aug 14 Javascript
微信分享的标题、缩略图、连接及描述设置方法
Oct 14 Javascript
加载列表时jquery获取ul中第一个li的属性
Nov 02 Javascript
jquery 实现返回顶部功能
Nov 17 Javascript
jQuery Easyui实现左右布局
Jan 26 Javascript
Bootstrap每天必学之标签页(Tab)插件
Aug 09 Javascript
微信小程序之小豆瓣图书实例
Nov 30 Javascript
基于jquery实现的鼠标悬停提示案例
Dec 11 Javascript
Jquery获取radio选中值实例总结
Jan 17 jQuery
js实现for循环跳过undefined值示例
Jul 02 Javascript
Vue点击切换Class变化,实现Active当前样式操作
Jul 17 Javascript
JavaScript小技巧带你提升你的代码技能
Sep 15 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
WINDOWS下php5.2.4+mysql6.0+apache2.2.4+ZendOptimizer-3.3.0配置
2008/03/28 PHP
PHP匿名函数(闭包函数)详解
2019/03/22 PHP
不同Jquery版本引发的问题解决
2013/10/14 Javascript
javascript:void(0)的作用示例介绍
2013/10/28 Javascript
Js控制滑轮左右滑动实例
2015/02/13 Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
2016/02/25 Javascript
浅谈Javascript中的12种DOM节点类型
2016/08/19 Javascript
JavaScript实现通过select标签跳转网页的方法
2016/09/29 Javascript
Vue源码解析之数组变异的实现
2018/12/04 Javascript
vue + typescript + 极验登录验证的实现方法
2019/06/27 Javascript
利用d3.js制作连线动画图与编辑器的方法实例
2019/09/05 Javascript
JavaScript设计模式之策略模式实现原理详解
2020/05/29 Javascript
基于ajax实现上传图片代码示例解析
2020/12/03 Javascript
[38:23]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第一场
2014/05/24 DOTA
python数组复制拷贝的实现方法
2015/06/09 Python
Java编程迭代地删除文件夹及其下的所有文件实例
2018/02/10 Python
Python使用xlwt模块操作Excel的方法详解
2018/03/27 Python
Django进阶之CSRF的解决
2018/08/01 Python
python中正则表达式与模式匹配
2019/05/07 Python
用sqlalchemy构建Django连接池的实例
2019/08/29 Python
Pytorch训练过程出现nan的解决方式
2020/01/02 Python
python3读取csv文件任意行列代码实例
2020/01/13 Python
python不使用for计算两组、多个矩形两两间的iou方式
2020/01/18 Python
波兰珠宝品牌:YES
2019/08/09 全球购物
俄罗斯护发和专业化妆品购物网站:Hihair
2019/09/28 全球购物
JDK安装目录下有哪些内容
2014/08/25 面试题
《新型玻璃》教学反思
2014/04/13 职场文书
2016大学自主招生推荐信范文
2015/03/23 职场文书
2015年售票员工作总结
2015/04/29 职场文书
2015年音乐教师个人工作总结
2015/05/20 职场文书
2015小学语文教师个人工作总结
2015/05/20 职场文书
2015年房地产个人工作总结
2015/05/26 职场文书
医护人员继续教育学习心得体会
2016/01/19 职场文书
分享:关于学习的励志名言赏析
2019/08/16 职场文书
俄罗斯十大城市人口排名,第三首都仅排第六,第二是北方首都
2022/03/20 杂记
Python中npy和mat文件的保存与读取
2022/04/24 Python