多个jquery.datatable共存,checkbox全选异常的快速解决方法


Posted in Javascript onDecember 10, 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 避免闭包引发的问题
Mar 17 Javascript
JavaScript常用对象的方法和属性小结
Jan 24 Javascript
js(JavaScript)实现TAB标签切换效果的简单实例
Feb 26 Javascript
js获取滚动距离的方法
May 30 Javascript
JavaScript关于提高网站性能的几点建议(一)
Jul 24 Javascript
老生常谈javascript变量的命名规范和注释
Sep 29 Javascript
JavaScript reduce和reduceRight详解
Oct 24 Javascript
jquery popupDialog 使用 加载jsp页面的方法
Oct 25 Javascript
jQuery实现判断控件是否显示的方法
Jan 11 Javascript
bootstrap datetimepicker日期插件使用方法
Jan 13 Javascript
JS中使用textPath实现线条上的文字
Dec 25 Javascript
对angularJs中自定义指令replace的属性详解
Oct 09 Javascript
js输入框邮箱自动提示功能代码实现
Dec 10 #Javascript
浅析jQuery1.8的几个小变化
Dec 10 #Javascript
Javascript中各种trim的实现详细解析
Dec 10 #Javascript
深入理解Javascript动态方法调用与参数修改的问题
Dec 10 #Javascript
ExtJS的拖拽效果示例
Dec 09 #Javascript
用Javascript获取页面元素的具体位置
Dec 09 #Javascript
jQuery取得select选择的文本与值的示例
Dec 09 #Javascript
You might like
php网站判断用户是否是手机访问的方法
2013/11/01 PHP
PHP通过加锁实现并发情况下抢码功能
2016/08/10 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
JQuery跨Iframe选择实现代码
2010/08/19 Javascript
改进UCHOME的记录发布,增强可访问性用户体验
2011/01/17 Javascript
二叉树先序遍历的非递归算法具体实现
2014/01/09 Javascript
基于jquery实现的可编辑下拉框实现代码
2014/08/02 Javascript
js中最容易被忽视的事件问题大总结
2016/05/15 Javascript
JavaScript中三种常见的排序方法
2017/02/24 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
2017/03/23 Javascript
JS实现移动端实时监听输入框变化的实例代码
2017/04/12 Javascript
JS使用Chrome浏览器实现调试线上代码
2020/07/23 Javascript
JS中锚点链接点击平滑滚动并自由调整到顶部位置
2021/02/06 Javascript
原生JavaScript实现幻灯片效果
2021/02/19 Javascript
[02:20]DOTA2亚洲邀请赛 IG战队出场宣传片
2015/02/07 DOTA
Python实现简单的可逆加密程序实例
2015/03/05 Python
使用C#配合ArcGIS Engine进行地理信息系统开发
2016/02/19 Python
python2.7的编码问题与解决方法
2016/10/04 Python
Python简单实现控制电脑的方法
2018/01/22 Python
Django objects的查询结果转化为json的三种方式的方法
2018/11/07 Python
Django使用Channels实现WebSocket的方法
2019/07/28 Python
HTML5时代CSS设置漂亮字体取代图片
2014/09/04 HTML / CSS
编写html5时调试发现脚本php等网页js、css等失效
2013/12/31 HTML / CSS
Tuckernuck官网:经典的美国品质服装、鞋子和配饰
2021/01/11 全球购物
如何让Java程序执行效率更高
2014/06/25 面试题
会计电算一体化个人简历的自我评价
2013/10/15 职场文书
财务工作个人求职的自我评价
2013/12/19 职场文书
土木建筑学生自我评价
2014/01/14 职场文书
承认错误的检讨书
2014/01/30 职场文书
优秀中学生事迹材料
2014/01/31 职场文书
井冈山红色之旅感想
2014/10/07 职场文书
服务承诺书
2015/01/19 职场文书
护士心得体会范文
2016/01/25 职场文书
告诉你一个秘密:富人致富的五大优点
2019/07/11 职场文书
Pytorch DataLoader shuffle验证方式
2021/06/02 Python
python+opencv实现视频抽帧示例代码
2021/06/11 Python