多个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 相关文章推荐
为你的网站增加亮点的9款jQuery插件推荐
May 03 Javascript
JQuery将文本转化成JSON对象需要注意的问题
May 09 Javascript
js操作checkbox遇到的问题解决
Jun 29 Javascript
jquery 模板的应用示例
Nov 12 Javascript
自己动手手写jQuery插件总结
Jan 20 Javascript
使用AngularJS实现表单向导的方法
Jun 19 Javascript
javascript框架设计之种子模块
Jun 23 Javascript
jquery拖拽排序简单实现方法(效果增强版)
Feb 16 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
May 11 Javascript
拥Bootstrap入怀——导航栏篇
May 30 Javascript
jquery中的常见问题及快速解决方法小结
Jun 14 Javascript
详解vue静态资源打包中的坑与解决方案
Feb 05 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
BBS(php &amp; mysql)完整版(一)
2006/10/09 PHP
PHP脚本的10个技巧(1)
2006/10/09 PHP
php语言流程控制中的主动与被动
2012/11/05 PHP
php基于socket实现SMTP发送邮件的方法
2015/03/05 PHP
PHP中$_SERVER使用说明
2015/07/05 PHP
Yii框架的布局文件实例分析
2019/09/04 PHP
5 cool javascript apps
2007/03/24 Javascript
零基础学JavaScript最新动画教程+iso光盘下载
2008/01/22 Javascript
基于JavaScript实现div层跟随滚动条滑动
2016/01/12 Javascript
全面解析vue中的数据双向绑定
2017/05/10 Javascript
jquery在启动页面时,自动加载数据的实例
2018/01/22 jQuery
微信小程序仿微信运动步数排行(交互)
2018/07/13 Javascript
vue2.0 路由模式mode=&quot;history&quot;的作用
2018/10/18 Javascript
详解小程序循环require之坑
2019/03/08 Javascript
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
2019/04/04 Javascript
自定义javascript验证框架示例【附源码下载】
2019/05/31 Javascript
js实现类选择器和name属性选择器的示例步骤
2021/02/07 Javascript
[54:56]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第三局
2016/03/06 DOTA
常用python数据类型转换函数总结
2014/03/11 Python
12步教你理解Python装饰器
2016/02/25 Python
PyQt5每天必学之进度条效果
2018/04/19 Python
在python中pandas的series合并方法
2018/11/12 Python
python学生管理系统学习笔记
2019/03/19 Python
python计算auc的方法
2020/09/09 Python
python爬取股票最新数据并用excel绘制树状图的示例
2021/03/01 Python
英国领先的珍珠首饰品牌:Orchira
2016/09/11 全球购物
WebSphere面试题:在WebSphere里面如何部署一个应用
2015/08/02 面试题
会计职业生涯规划书
2014/01/13 职场文书
校园广播稿500字
2014/02/04 职场文书
个人培训自我鉴定
2014/03/28 职场文书
护士求职自荐信
2015/03/25 职场文书
结婚仪式主持词
2015/06/29 职场文书
运动会闭幕式通讯稿
2015/07/18 职场文书
施工安全责任协议书
2016/03/23 职场文书
Win11显卡控制面板打开显卡设置方法
2022/04/20 数码科技
Golang 结构体数据集合
2022/04/22 Golang