多个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实现UTF8编码转换成gb2312编码
Dec 22 Javascript
[推荐]javascript 面向对象技术基础教程
Mar 03 Javascript
javaScript parseInt字符转化为数字函数使用小结
Nov 05 Javascript
基于jQuery实现图片的前进与后退功能
Apr 24 Javascript
js操作输入框提示信息且响应鼠标事件
Mar 25 Javascript
基于Css3和JQuery实现打字机效果
Aug 11 Javascript
Node.js实用代码段之正确拼接Buffer
Mar 17 Javascript
JavaScript使用atan2来绘制箭头和曲线的实例
Sep 14 Javascript
vue cli webpack中使用sass的方法
Feb 24 Javascript
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
Jan 15 Javascript
JS使用数组实现的队列功能示例
Mar 04 Javascript
Vue项目引发的「过滤器」使用教程
Mar 12 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
颠覆常识!无色透明的咖啡诞生了(中日双语)
2021/03/03 咖啡文化
php jquery 实现新闻标签分类与无刷新分页
2009/12/18 PHP
Zend的MVC机制使用分析(二)
2013/05/02 PHP
php异常处理使用示例
2014/02/25 PHP
详解EventDispatcher事件分发组件
2016/12/25 PHP
jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
2014/05/08 Javascript
JavaScript设计模式学习之“类式继承”
2015/03/12 Javascript
JavaScript中利用Array和Object实现Map的方法
2015/07/27 Javascript
jQuery动画效果相关方法实例分析
2015/12/31 Javascript
快速掌握Node.js事件驱动模型
2016/03/21 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
2016/11/28 Javascript
原生js实现节日时间倒计时功能
2017/01/18 Javascript
使用jQuery实现鼠标点击左右按钮滑动切换
2017/08/04 jQuery
JavaScript中window和document用法详解
2020/07/28 Javascript
Openlayers实现地图的基本操作
2020/09/28 Javascript
[00:10]DOTA2全国高校联赛 以DOTA2会友
2018/05/30 DOTA
[00:29]2019完美世界全国高校联赛(秋季赛)总决赛海口落幕
2019/12/10 DOTA
Python urls.py的三种配置写法实例详解
2017/04/28 Python
python机器学习理论与实战(四)逻辑回归
2018/01/19 Python
python删除文本中行数标签的方法
2018/05/31 Python
python3 http提交json参数并获取返回值的方法
2018/12/19 Python
Python+Django+MySQL实现基于Web版的增删改查的示例代码
2020/05/13 Python
python3.7调试的实例方法
2020/07/21 Python
Django实现随机图形验证码的示例
2020/10/15 Python
css3 border-radius属性详解
2017/07/05 HTML / CSS
英国高档百货连锁店:John Lewis
2017/11/20 全球购物
OSPF有什么优点?为什么OSPF比RIP收敛快?
2013/02/13 面试题
文员个人的求职信范文
2013/09/26 职场文书
员工培训心得体会
2013/12/30 职场文书
学生生病请假条范文
2014/02/16 职场文书
五一劳动节演讲稿
2014/09/12 职场文书
学校领导四风问题整改措施思想汇报
2014/10/09 职场文书
自主招生自荐信范文
2015/03/04 职场文书
2015年新农合工作总结
2015/03/30 职场文书
护士自荐信范文(2016推荐篇)
2016/01/28 职场文书
写作技巧:如何撰写一份优秀的营销策划书
2019/08/13 职场文书