多个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 相关文章推荐
javascript简单事件处理和with用法介绍
Sep 16 Javascript
AngularJS 实现JavaScript 动画效果详解
Sep 08 Javascript
jQuery焦点图轮播效果实现方法
Dec 19 Javascript
微信公众号菜单配置微信小程序实例详解
Mar 31 Javascript
JavaScript实现省市联动过程中bug的解决方法
Dec 04 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
Dec 13 Javascript
bootstrap table实现合并单元格效果
Dec 24 Javascript
three.js搭建室内场景教程
Dec 30 Javascript
JS数组Object.keys()方法的使用示例
Jun 05 Javascript
Element DateTimePicker日期时间选择器的使用示例
Jul 27 Javascript
JS运算符优先级与表达式示例详解
Sep 04 Javascript
通过实例解析js可枚举属性与不可枚举属性
Dec 02 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 常用类汇总 推荐收藏
2010/05/13 PHP
php中使用临时表查询数据的一个例子
2013/02/03 PHP
php curl模拟post请求小实例
2013/11/13 PHP
PHP使用CURL获取302跳转后的地址实例
2014/05/04 PHP
简单了解将WordPress中的工具栏移到底部的小技巧
2015/12/31 PHP
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
2013/11/18 Javascript
js实现照片墙功能实例
2015/02/05 Javascript
JavaScript子窗口调用父窗口变量和函数的方法
2015/10/09 Javascript
jquery对象访问是什么及使用方法介绍
2016/05/03 Javascript
AngularJS延迟加载html template
2016/07/27 Javascript
AngularJs Scope详解及示例代码
2016/09/01 Javascript
iscroll.js滚动加载实例详解
2017/07/18 Javascript
面包屑导航详解
2017/12/07 Javascript
微信小程序实现YDUI的ScrollTab组件
2018/02/02 Javascript
vue中$refs的用法及作用详解
2018/04/24 Javascript
解析Json字符串的三种方法日常常用
2018/05/02 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
2018/08/22 Javascript
从零学Python之入门(四)运算
2014/05/27 Python
Window10+Python3.5安装opencv的教程推荐
2018/04/02 Python
python之从文件读取数据到list的实例讲解
2018/04/19 Python
Python使用一行代码获取上个月是几月
2018/08/30 Python
Python3爬虫学习之MySQL数据库存储爬取的信息详解
2018/12/12 Python
Python 通过requests实现腾讯新闻抓取爬虫的方法
2019/02/22 Python
NumPy 基本切片和索引的具体使用方法
2019/04/24 Python
Matlab中plot基本用法的具体使用
2020/07/17 Python
纯css3实现照片墙效果
2014/12/26 HTML / CSS
国外平面设计第一市场:99designs
2016/10/25 全球购物
CheapTickets香港机票预订网站:CheapTickets.hk
2019/06/26 全球购物
Ado与Ado.net的相同与不同
2014/12/08 面试题
通息工程毕业生自荐信
2013/10/16 职场文书
毕业生个人求职信范文分享
2014/01/05 职场文书
处级干部反四风个人对照检查材料思想汇报
2014/09/27 职场文书
办公室主任岗位职责范本
2015/03/31 职场文书
如何使用php生成zip压缩包
2021/04/21 PHP
详细介绍python类及类的用法
2021/05/31 Python
Go gRPC进阶教程gRPC转换HTTP
2022/06/16 Golang