多个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 相关文章推荐
纯js实现的论坛常用的运行代码的效果
Jul 15 Javascript
JavaScript中Object和Function的关系小结
Sep 26 Javascript
利用jQuery和CSS将背景图片拉伸
Oct 16 Javascript
原生js实现autocomplete插件
Apr 14 Javascript
利用js编写响应式侧边栏
Sep 17 Javascript
jQuery动态添加与删除tr行实例代码
Oct 18 Javascript
jQuery实现frame之间互通的方法
Jun 26 jQuery
Vue v2.5 调整和更新不完全问题
Oct 24 Javascript
es6新特性之 class 基本用法解析
May 05 Javascript
微信小程序使用websocket通讯的demo,含前后端代码,亲测可用
May 22 Javascript
Vue切换div显示隐藏,多选,单选代码解析
Jul 14 Javascript
如何利用JavaScript编写一个格斗小游戏
Jan 06 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
Apache2 httpd.conf 中文版
2006/12/06 PHP
在PHP中使用模板的方法
2008/05/24 PHP
Yii使用CLinkPager分页实例详解
2014/07/23 PHP
php把大写命名转换成下划线分割命名
2015/04/27 PHP
php实现处理输入转义字符的代码
2015/11/08 PHP
php生成验证码,缩略图及水印图的类分享
2016/04/07 PHP
一个非常实用的php文件上传类
2017/07/04 PHP
php简单检测404页面的方法示例
2019/08/23 PHP
javascript 自动填写表单的实现方法
2010/04/09 Javascript
JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型
2012/10/11 Javascript
javascript与有限状态机详解
2014/05/08 Javascript
JavaScript实现弹出子窗口并传值给父窗口
2014/12/18 Javascript
使用JQuery实现的分页插件分享
2015/11/05 Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
2017/01/11 Javascript
Vuepress 搭建带评论功能的静态博客的实现
2019/02/17 Javascript
微信小程序Flex布局用法深入浅出分析
2019/04/25 Javascript
浅谈layui里的上传控件问题
2019/09/26 Javascript
[44:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#4EG VS Fnatic第二局
2016/03/03 DOTA
[00:59]DOTA2英雄背景故事——上古巨神
2020/06/28 DOTA
分享15个最受欢迎的Python开源框架
2014/07/13 Python
在Python中使用mongoengine操作MongoDB教程
2015/04/24 Python
python中函数总结之装饰器闭包详解
2016/06/12 Python
详解pandas安装若干异常及解决方案总结
2019/01/10 Python
python3利用ctypes传入一个字符串类型的列表方法
2019/02/12 Python
python assert的用处示例详解
2019/04/01 Python
opencv设置采集视频分辨率方式
2019/12/10 Python
python numpy矩阵信息说明,shape,size,dtype
2020/05/22 Python
python实现最短路径的实例方法
2020/07/19 Python
德国网上超市:myTime.de
2019/08/26 全球购物
销售总监岗位职责
2014/01/04 职场文书
小班开学寄语
2014/04/04 职场文书
安康杯竞赛活动总结
2014/05/05 职场文书
李开复演讲稿
2014/05/24 职场文书
忠诚教育心得体会
2014/09/03 职场文书
单位接收证明格式
2015/06/18 职场文书
八年级语文教学反思
2016/03/03 职场文书