多个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 相关文章推荐
Wordpress ThickBox 添加“查看原图”效果代码
Dec 11 Javascript
解决Jquery鼠标经过不停滑动的问题
Mar 03 Javascript
js实现弹出窗口、页面变成灰色并不可操作的例子分享
May 10 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
Sep 01 Javascript
Javascript如何判断数据类型和数组类型
Jun 22 Javascript
Bootstrap表单布局样式源代码
Jul 04 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
Nov 07 Javascript
Angular的模块化(代码分享)
Dec 26 Javascript
Node.js实现发送邮件功能
Nov 06 Javascript
JS中Object对象的原型概念基础
Jan 29 Javascript
微信小程序js文件改变参数并在视图上及时更新【推荐】
Jun 11 Javascript
JS校验与最终登陆界面功能完整示例
Jan 13 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 上传文件的方法(类)
2009/07/30 PHP
PHP中UNIX时间戳和日期间的转换与计算实例
2014/11/19 PHP
php函数实现判断是否移动端访问
2015/03/03 PHP
PHP实现的贪婪算法实例
2017/10/17 PHP
实现复选框全选/全不选切换
2006/12/23 Javascript
CSS和JS标签style属性对照表(方便js开发的朋友)
2010/11/11 Javascript
js弹出框轻量级插件jquery.boxy使用介绍
2013/01/15 Javascript
jQuery怎么解析Json字符串(Json格式/Json对象)
2013/08/09 Javascript
jquery浏览器滚动加载技术实现方案
2014/06/03 Javascript
jquery取子节点及当前节点属性值的方法
2014/09/09 Javascript
JavaScript 学习笔记之基础中的基础
2015/01/13 Javascript
jquery通过ajax加载一段文本内容的方法
2015/01/15 Javascript
JQuery select(下拉框)操作方法汇总
2015/04/15 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
2020/05/16 Javascript
微信小程序 闭包写法详细介绍
2016/12/14 Javascript
字太多用...代替的方法(两种)
2017/03/15 Javascript
vue router2.0二级路由的简单使用
2017/07/05 Javascript
Vue列表页渲染优化详解
2017/07/24 Javascript
浅谈pc端rem字体设置的问题
2017/08/03 Javascript
fullpage.js最后一屏滚动方式
2018/02/06 Javascript
jQuery替换节点元素的操作方法
2018/03/18 jQuery
vue下拉列表功能实例代码
2018/04/08 Javascript
详解在Node.js中发起HTTP请求的5种方法
2019/01/10 Javascript
[42:25]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第三场
2018/04/06 DOTA
python中property和setter装饰器用法
2019/12/19 Python
python实现移动木板小游戏
2020/10/09 Python
英国汽车座椅和婴儿车购物网站:Uber Kids
2017/04/19 全球购物
双方协议书
2014/04/22 职场文书
商务英语专业求职信
2014/06/26 职场文书
学生旷课检讨书500字
2014/10/28 职场文书
七年级地理教学计划
2015/01/22 职场文书
综合素质评价个性与发展自我评价
2015/03/06 职场文书
微信搭讪开场白
2015/05/28 职场文书
合作协议书格式范本
2016/03/21 职场文书
python批量更改目录名/文件名的方法
2021/04/18 Python
JS实现简单的九宫格抽奖
2022/06/28 Javascript