多个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 相关文章推荐
jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
Jul 01 Javascript
在子窗口中关闭父窗口的一句代码
Oct 21 Javascript
Jquery之Bind方法参数传递与接收的三种方法
Jun 24 Javascript
JavaScript实现的一个日期格式化函数分享
Dec 06 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
Sep 11 Javascript
基于 flexible 的 Vue 组件:Toast -- 显示框效果
Dec 26 Javascript
vue如何在自定义组件中使用v-model
May 14 Javascript
webpack4 + react 搭建多页面应用示例
Aug 03 Javascript
详解vue的数据劫持以及操作数组的坑
Apr 18 Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
Sep 17 Javascript
使用axios请求时,发送formData请求的示例
Oct 29 Javascript
Nest.js环境变量配置与序列化详解
Feb 21 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删除txt文件指定行及按行读取txt文档数据的方法
2017/01/30 PHP
php实现数字补零的方法总结
2018/09/12 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
javascript实现的基于金山词霸网络翻译的代码
2010/01/15 Javascript
关于JavaScript与HTML的交互事件
2013/04/12 Javascript
jquery获取自定义属性(attr和prop)实例介绍
2013/04/21 Javascript
Javascript核心读书有感之语言核心
2015/02/01 Javascript
基于JavaScript怎么实现让歌词滚动播放
2015/11/03 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
2015/11/07 Javascript
老生常谈javascript变量的命名规范和注释
2016/09/29 Javascript
JavaScript中条件语句的优化技巧总结
2020/12/04 Javascript
[01:29]2014DOTA2展望TI 剑指西雅图DK战队专访
2014/06/30 DOTA
[59:44]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 paiN vs iG
2018/03/31 DOTA
python实现自动登录人人网并采集信息的方法
2015/06/28 Python
python实现的简单RPG游戏流程实例
2015/06/28 Python
Python自定义主从分布式架构实例分析
2016/09/19 Python
PyQt5实现简单数据标注工具
2019/03/18 Python
详解用Python实现自动化监控远程服务器
2019/05/18 Python
python 将html转换为pdf的几种方法
2020/12/29 Python
python抢购软件/插件/脚本附完整源码
2021/03/04 Python
NUK奶瓶美国官网:NUK美国
2016/09/26 全球购物
英国鞋类及配饰零售商:Kurt Geiger
2017/02/04 全球购物
会计专业推荐信
2013/10/29 职场文书
学院书画协会部门岗位职责
2013/12/01 职场文书
车间操作工岗位职责
2013/12/19 职场文书
运动会广播稿100字
2014/01/11 职场文书
法学专业自我鉴定
2014/02/05 职场文书
煤矿机修工岗位职责
2014/02/07 职场文书
《听鱼说话》教学反思
2014/02/15 职场文书
小学生元旦感言
2014/02/26 职场文书
代办委托书怎么写
2014/08/01 职场文书
党校学习党性分析材料
2014/12/19 职场文书
红歌会主持词
2015/07/02 职场文书
保护环境建议书作文500字
2015/09/14 职场文书
redis通过6379端口无法连接服务器(redis-server.exe闪退)
2021/05/08 Redis
Mysql中@和@@符号的详细使用指南
2022/06/05 MySQL