多个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 相关文章推荐
html下载本地
Jun 19 Javascript
javascript,jquery闭包概念分析
Jun 19 Javascript
EasyUI 中 MenuButton 的使用方法
Jul 14 Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
Mar 12 Javascript
js简易namespace管理器 实例代码
Jun 21 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
Nov 26 Javascript
javascript判断并获取注册表中可信任站点的方法
Jun 01 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
Jun 23 Javascript
详解vue.js2.0父组件点击触发子组件方法
May 10 Javascript
Javascript实现base64的加密解密方法示例
Jun 27 Javascript
Vue.js中的computed工作原理
Mar 22 Javascript
详解vue中的父子传值双向绑定及数据更新问题
Jun 13 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 base64+gzinflate压缩编码和解码代码
2008/10/03 PHP
PHP修改session_id示例代码
2014/01/08 PHP
php过滤所有恶意字符(批量过滤post,get敏感数据)
2014/03/18 PHP
从零开始学YII2框架(四)扩展插件yii2-kartikgii
2014/08/20 PHP
CI框架Session.php源码分析
2014/11/03 PHP
php通过淘宝API查询IP地址归属等信息
2015/12/25 PHP
CI(CodeIgniter)框架实现图片上传的方法
2017/03/24 PHP
php 二维数组快速排序算法的实现代码
2017/10/17 PHP
PHP面向对象五大原则之开放-封闭原则(OCP)详解
2018/04/04 PHP
PHP实现的策略模式示例
2019/03/20 PHP
PHP实现随机发放扑克牌
2020/04/21 PHP
详细讲解JS节点知识
2010/01/31 Javascript
js或者jquery判断图片是否加载完成实现代码
2013/03/20 Javascript
JavaScript交换两个变量值的七种解决方案
2016/12/01 Javascript
详解JavaScript RegExp对象
2017/02/04 Javascript
Vue底层实现原理总结
2018/02/17 Javascript
基于Vue实现图片在指定区域内移动的思路详解
2018/11/11 Javascript
vuex实现的简单购物车功能示例
2019/02/13 Javascript
微信小程序实现录音时的麦克风动画效果实例
2019/05/18 Javascript
js使用文件流下载csv文件的实现方法
2019/07/15 Javascript
JSONP解决JS跨域问题的实现
2020/05/25 Javascript
微信小程序实现多图上传
2020/06/19 Javascript
[02:11]2016国际邀请赛中国区预选赛最美TA采访现场玩家
2016/06/28 DOTA
浅谈Python 列表字典赋值的陷阱
2019/01/20 Python
django settings.py 配置文件及介绍
2019/07/15 Python
Django框架视图介绍与使用详解
2019/07/18 Python
django教程如何自学
2020/07/31 Python
CSS3 @font-face属性使用指南
2014/12/12 HTML / CSS
微信小程序“圣诞帽”的实现思路详解
2017/12/28 HTML / CSS
柯基袜:Corgi Socks
2017/01/26 全球购物
为什么会有内存对齐
2016/10/10 面试题
给护士表扬信
2014/01/19 职场文书
财政专业求职信范文
2014/02/19 职场文书
地道战观后感
2015/06/04 职场文书
小学生暑假安全保证书
2015/07/13 职场文书
MySQL系列之五 视图、存储函数、存储过程、触发器
2021/07/02 MySQL