多个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 相关文章推荐
User Scripts: Video Download by User Scripts
May 14 Javascript
开发跨浏览器javascript常见注意事项
Jan 01 Javascript
js 中{},[]中括号,大括号使用详解
May 12 Javascript
getElementByIdx_x js自定义getElementById函数
Jan 24 Javascript
用jquery实现点击栏目背景色改变
Dec 10 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
Feb 18 Javascript
Jquery元素追加和删除的实现方法
May 24 Javascript
javascript中this用法实例详解
Apr 06 Javascript
Popup弹出框添加数据实现方法
Oct 27 Javascript
基于js 字符串indexof与search方法的区别(详解)
Dec 04 Javascript
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
js实现表单项的全选、反选及删除操作示例
Jun 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
使用PHP遍历文件目录与清除目录中文件的实现详解
2013/06/24 PHP
PHP中使用Imagick读取pdf并生成png缩略图实例
2015/01/21 PHP
yii2 commands模式以及配置crontab定时任务的方法
2017/08/19 PHP
php写app用的框架整理
2019/09/29 PHP
IE和Firefox下javascript的兼容写法小结
2008/12/10 Javascript
js获取当前时间显示在页面上并每秒刷新
2014/12/24 Javascript
JavaScript实现复制文章自动添加版权
2016/08/02 Javascript
JS比较两个数值的大小实例
2016/11/25 Javascript
微信小程序 实现动态显示和隐藏某个控件
2017/04/27 Javascript
SeaJS中use函数用法实例分析
2017/10/10 Javascript
原生js实现二级联动菜单
2019/11/27 Javascript
原生js canvas实现鼠标跟随效果
2020/08/02 Javascript
详解uniapp的全局变量实现方式
2021/01/11 Javascript
[01:00:44]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第三局
2016/03/04 DOTA
python共享引用(多个变量引用)示例代码
2013/12/04 Python
python实现zencart产品数据导入到magento(python导入数据)
2014/04/03 Python
Python判断文件或文件夹是否存在的三种方法
2017/07/27 Python
Python 中 Virtualenv 和 pip 的简单用法详解
2017/08/18 Python
Python3 导入上级目录中的模块实例
2019/02/16 Python
使用pandas读取文件的实现
2019/07/31 Python
Python计算不规则图形面积算法实现解析
2019/11/22 Python
Python-openCV读RGB通道图实例
2020/01/17 Python
python-xpath获取html文档的部分内容
2020/03/06 Python
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
2012/12/13 HTML / CSS
Html5插件教程之添加浏览器放大镜效果的商品橱窗
2016/01/07 HTML / CSS
美国创意之家:BulbHead
2017/07/12 全球购物
速比涛英国官网:Speedo英国
2019/07/15 全球购物
STP协议的主要用途是什么?为什么要用STP
2012/12/20 面试题
房地产融资计划书
2014/01/10 职场文书
商场消防演习方案
2014/02/12 职场文书
工作证明书
2015/06/15 职场文书
你离财务总监还有多远?速览CFO的岗位职责
2019/11/18 职场文书
nginx 防盗链防爬虫配置详解
2021/03/31 Servers
SQLServer2019 数据库的基本使用之图形化界面操作的实现
2021/04/08 SQL Server
python绘制云雨图raincloud plot
2022/08/05 Python
Redis主从复制操作和配置详情
2022/09/23 Redis