多个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 相关文章推荐
js操作ajax返回的json的注意问题!
Feb 23 Javascript
jquery中对表单的基本操作代码
Jul 29 Javascript
鼠标滚轴控制文本框值的JS代码
Nov 19 Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
Aug 27 Javascript
jQuery简单几行代码实现tab切换
Mar 10 Javascript
jQuery实现弹出窗口中切换登录与注册表单
Jun 05 Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
Dec 25 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
Jul 08 Javascript
bootstrap输入框组件使用方法详解
Jan 19 Javascript
ES6新特性之字符串的扩展实例分析
Apr 01 Javascript
JS实现的雪花飘落特效示例
Dec 03 Javascript
JavaScript 原型与原型链详情
Nov 02 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动态实现表格跨行跨列实现代码
2012/11/06 PHP
PHP基础教程(php入门基础教程)一些code代码
2013/01/06 PHP
php设计模式之适配器模式原理、用法及注意事项详解
2019/09/24 PHP
jQuery 选择器项目实例分析及实现代码
2012/12/28 Javascript
原生JS实现响应式瀑布流布局
2015/04/02 Javascript
创建自己的jquery表格插件
2015/11/25 Javascript
jQuery ajax分页插件实例代码
2016/01/27 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
2017/01/04 Javascript
Vue 2.0入门基础知识之内部指令详解
2017/10/15 Javascript
JS实现瀑布流布局
2017/10/21 Javascript
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法
2017/11/27 Javascript
nodejs搭建本地服务器轻松解决跨域问题
2018/03/21 NodeJs
JS的函数调用栈stack size的计算方法
2018/06/24 Javascript
详解vue高级特性
2020/06/09 Javascript
Openlayers3实现车辆轨迹回放功能
2020/09/29 Javascript
JS实现公告上线滚动效果
2021/01/10 Javascript
[44:30]完美世界DOTA2联赛PWL S2 GXR vs Magma 第一场 11.25
2020/11/26 DOTA
Python中实现对Timestamp和Datetime及UTC时间之间的转换
2015/04/08 Python
详解Python的Django框架中的模版相关知识
2015/07/15 Python
python3.5仿微软计算器程序
2020/03/30 Python
python 采集中文乱码问题的完美解决方法
2016/09/27 Python
基于MTCNN/TensorFlow实现人脸检测
2018/05/24 Python
用Python实现最速下降法求极值的方法
2019/07/10 Python
python区分不同数据类型的方法
2019/10/14 Python
python对象转字典的两种实现方式示例
2019/11/07 Python
python 解决print数组/矩阵无法完整输出的问题
2020/02/19 Python
Django全局启用登陆验证login_required的方法
2020/06/02 Python
中国最大隐形眼镜网上商城:视客眼镜网
2016/10/30 全球购物
极度干燥澳大利亚官方网站:Superdry澳大利亚
2019/03/28 全球购物
为什么UNION ALL比UNION快
2016/03/17 面试题
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/04/11 面试题
2014年教师节活动总结
2014/08/29 职场文书
2014领导班子四风问题对照检查材料思想汇报
2014/09/21 职场文书
保密工作整改情况汇报
2014/11/06 职场文书
开业典礼致辞
2015/07/29 职场文书
总结Python使用过程中的bug
2021/06/18 Python