多个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判断非数字的简单例子
Jul 18 Javascript
JQuery解析HTML、JSON和XML实例详解
Mar 29 Javascript
jQuery 插件开发指南
Nov 14 Javascript
javascript框架设计读书笔记之数组的扩展与修复
Dec 02 Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
Dec 25 Javascript
基于jquery实现简单的分页控件
Mar 17 Javascript
详解webpack4多入口、多页面项目构建案例
May 25 Javascript
浅谈Webpack下多环境配置的思路
Jun 27 Javascript
详解Vue CLI 3.0脚手架如何mock数据
Nov 23 Javascript
使用layer.msg 时间设置不起作用的解决方法
Sep 12 Javascript
关于vue里页面的缓存详解
Nov 04 Javascript
vue 需求 data中的数据之间的调用操作
Aug 05 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
对Session和Cookie的区分与解释
2007/03/16 PHP
Mysql中分页查询的两个解决方法比较
2013/05/02 PHP
探讨:如何通过stats命令分析Memcached的内部状态
2013/06/14 PHP
解析在PHP中使用mysqli扩展库对mysql的操作
2013/07/03 PHP
汇总PHPmailer群发Gmail的常见问题
2016/02/24 PHP
jquery 查找select ,并触发事件的实现代码
2011/03/30 Javascript
Javascript验证上传图片大小[前台处理]
2014/07/18 Javascript
jQuery html()方法使用不了无法显示内容的问题
2014/08/06 Javascript
Js中使用hasOwnProperty方法检索ajax响应对象的例子
2014/12/08 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
2016/05/12 Javascript
js实现tab切换效果
2017/02/16 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
2017/02/22 Javascript
jQuery事件与动画基础详解
2017/02/23 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
2017/07/21 Javascript
jQuery封装animate.css的实例
2018/01/04 jQuery
MVVM 双向绑定的实现代码
2018/06/21 Javascript
最简单的JS实现json转csv的方法
2019/01/10 Javascript
JS实现深度优先搜索求解两点间最短路径
2019/01/17 Javascript
vue里如何主动销毁keep-alive缓存的组件
2019/03/21 Javascript
[04:26]DOTA2上海特锦赛小组赛第二日 TOP10精彩集锦
2016/02/27 DOTA
删除目录下相同文件的python代码(逐级优化)
2012/05/25 Python
Python中用于返回绝对值的abs()方法
2015/05/14 Python
python下解压缩zip文件并删除文件的实例
2018/04/24 Python
HTML5地理定位_动力节点Java学院整理
2017/07/12 HTML / CSS
HTML5自定义视频播放器源码
2020/01/06 HTML / CSS
英国轻奢珠宝品牌:Astley Clarke
2016/12/18 全球购物
药剂学专业应届生自荐信
2013/09/29 职场文书
毕业生的自我评价
2013/12/30 职场文书
初三家长会邀请函
2014/01/18 职场文书
培训讲师岗位职责
2014/04/13 职场文书
个人自查自纠材料
2014/10/14 职场文书
尼克胡哲观后感
2015/06/08 职场文书
卫生主题班会
2015/08/14 职场文书
2016年第16个全民国防教育日宣传活动总结
2016/04/05 职场文书
关于ObjectUtils.isEmpty() 和 null 的区别
2022/02/28 Java/Android
Python内置数据类型中的集合详解
2022/03/18 Python