多个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 相关文章推荐
getJSON调用后台json数据时函数被调用两次的原因猜想
Sep 29 Javascript
JS常用函数使用指南
Nov 23 Javascript
Backbone.js中的集合详解
Jan 14 Javascript
JQuery异步获取返回值中文乱码的解决方法
Jan 29 Javascript
使用JavaScript实现连续滚动字幕效果的方法
Jul 07 Javascript
Webpack打包慢问题的完美解决方法
Mar 16 Javascript
Angular 4环境准备与Angular cli创建项目详解
May 27 Javascript
详解微信小程序回到顶部的两种方式
May 09 Javascript
JS 自执行函数原理及用法
Aug 05 Javascript
layui时间控件选择时间范围的实现方法
Sep 28 Javascript
微信内置浏览器图片查看器的代码实例
Oct 08 Javascript
vue select 获取value和lable操作
Aug 28 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
德劲1104的电路分析与改良
2021/03/01 无线电
PHP 中检查或过滤IP地址的实现代码
2011/11/27 PHP
ThinkPHP分页类使用详解
2014/03/05 PHP
php 使用GD库为页面增加水印示例代码
2014/03/24 PHP
WordPress中的shortcode短代码功能使用详解
2016/05/17 PHP
PHP输出图像imagegif、imagejpeg与imagepng函数用法分析
2016/11/14 PHP
利用laravel搭建一个迷你博客实战教程
2017/08/13 PHP
laravel 解决groupBy时出现的错误 isn't in Group By问题
2019/10/17 PHP
PHP获取类私有属性的3种方法
2020/09/10 PHP
非主流的textarea自增长实现js代码
2011/12/20 Javascript
javascript页面加载完执行事件代码
2014/02/11 Javascript
jquery验证手机号是否正确实例讲解
2015/11/17 Javascript
JS使用post提交的两种方式
2015/12/03 Javascript
jQuery操作基本控件方法实例分析
2015/12/31 Javascript
JavaScript中的一些隐式转换和总结(推荐)
2017/12/22 Javascript
vue实现文章内容过长点击阅读全文功能的实例
2017/12/28 Javascript
使用JavaScript生成罗马字符的实例代码
2018/06/08 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
2018/08/24 Javascript
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
2018/10/09 Javascript
微信小程序实现一张或多张图片上传(云开发)
2019/09/25 Javascript
浅谈Vue static 静态资源路径 和 style问题
2020/11/07 Javascript
[01:46]TI4西雅图DOTA2前线报道 中国选手抱团调时差
2014/07/08 DOTA
Windows下python2.7.8安装图文教程
2016/05/26 Python
python 实现对文件夹内的文件排序编号
2018/04/12 Python
python利用蒙版抠图(使用PIL.Image和cv2)输出透明背景图
2020/08/04 Python
利用python 下载bilibili视频
2020/11/13 Python
法律工作求职自荐信
2013/10/31 职场文书
环保倡议书100字
2014/05/15 职场文书
酒店管理失职检讨书
2014/09/16 职场文书
邹越演讲观后感
2015/06/15 职场文书
幼儿园科学课教学反思
2016/03/03 职场文书
七年级作文之《我和我的祖国》观后感作文
2019/10/18 职场文书
python爬取豆瓣电影TOP250数据
2021/05/23 Python
nginx容器方式反向代理实战
2022/04/18 Servers
Windows Server 2008配置防火墙策略详解
2022/06/28 Servers
本地搭建minio文件服务器(使用bat脚本启动)的方法
2022/07/15 Servers