多个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 相关文章推荐
document.addEventListener使用介绍
Mar 07 Javascript
JavaScript学习笔记之JS对象
Jan 22 Javascript
jquery实现焦点图片随机切换效果的方法
Mar 12 Javascript
jQuery中 delegate使用的问题
Jul 03 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
Aug 29 Javascript
网页瀑布流布局jQuery实现代码
Oct 21 Javascript
详解原生js实现offset方法
Jun 15 Javascript
详解vue使用插槽分发内容slot的用法
Mar 28 Javascript
深入剖析JavaScript instanceof 运算符
Jun 14 Javascript
浅谈Vue SSR中的Bundle的具有使用
Nov 21 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
Jan 21 Javascript
node.JS路径解析之PATH模块使用方法详解
Feb 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
php上传图片并压缩的实现方法
2015/12/22 PHP
thinkphp5框架扩展redis类方法示例
2019/05/06 PHP
jQuery版仿Path菜单效果
2011/12/15 Javascript
用JQuery实现全选与取消的两种简单方法
2014/02/22 Javascript
javascript随机之洗牌算法深入分析
2014/06/07 Javascript
javascript使用call调用微信API
2014/12/15 Javascript
javascript判断网页是关闭还是刷新
2015/09/12 Javascript
jQuery 全选 全不选 事件绑定的实现代码
2017/01/23 Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
2017/09/20 jQuery
基于Koa(nodejs框架)对json文件进行增删改查的示例代码
2019/02/02 NodeJs
ES6入门教程之变量的解构赋值详解
2019/04/13 Javascript
基于vue如何发布一个npm包的方法步骤
2019/05/15 Javascript
微信小程序顶部导航栏可滑动并选中放大
2019/12/05 Javascript
原生JS实现萤火虫效果
2020/03/07 Javascript
nuxt.js服务端渲染中axios和proxy代理的配置操作
2020/11/06 Javascript
Python连接SQLServer2000的方法详解
2017/04/19 Python
python开启摄像头以及深度学习实现目标检测方法
2018/08/03 Python
python函数的万能参数传参详解
2019/07/26 Python
Python中list的交、并、差集获取方法示例
2019/08/01 Python
python selenium操作cookie的实现
2020/03/18 Python
使用python matplotlib 画图导入到word中如何保证分辨率
2020/04/16 Python
Pycharm安装并配置jupyter notebook的实现
2020/05/18 Python
pycharm实现print输出保存到txt文件
2020/06/01 Python
Lombok插件安装(IDEA)及配置jar包使用详解
2020/11/04 Python
python3爬虫中引用Queue的实例讲解
2020/11/24 Python
新奇的小玩意:IWOOT
2016/07/21 全球购物
英国办公用品商店:Office Outlet
2018/04/04 全球购物
瑜伽国际:Yoga International
2018/04/18 全球购物
第二层交换机和路由器的区别?第三层交换机和路由器的区别?
2013/05/23 面试题
应届专科生个人的自我评价
2014/01/05 职场文书
优秀士兵先进事迹
2014/02/06 职场文书
读群众路线的心得体会
2014/09/03 职场文书
2014年高校辅导员工作总结
2014/12/09 职场文书
文员岗位职责范本
2015/04/16 职场文书
2016年社区服务活动总结
2016/04/06 职场文书
《游戏王:大师决斗》新活动上线 若无符合卡组可免费租用
2022/04/13 其他游戏