多个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中的escape及unescape函数的php实现代码
Sep 04 Javascript
jquery.alert 弹出式复选框实现代码
Jun 15 Javascript
JQuery入门——事件切换之toggle()方法应用介绍
Feb 05 Javascript
jQuery如何实现点击页面获得当前点击元素的id或其他信息
Jan 09 Javascript
JavaScript中获取样式的原生方法小结
Oct 08 Javascript
JS实现淡蓝色简洁竖向Tab点击切换效果
Oct 06 Javascript
JavaScript实现点击按钮字体放大、缩小
Feb 29 Javascript
值得分享和收藏的xmlplus组件学习教程
May 05 Javascript
详解从买域名到使用pm2部署node.js项目全过程
Mar 07 Javascript
几个你不知道的技巧助你写出更优雅的vue.js代码
Jun 11 Javascript
发布订阅模式在vue中的实际运用实例详解
Jun 09 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
Aug 03 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
动态调用CSS文件的JS代码
2010/07/29 Javascript
ajax上传时参数提交不更新等相关问题
2012/12/11 Javascript
JS获取随机数函数可自定义最小值最大值
2014/05/08 Javascript
jQuery实现图片预加载效果
2015/11/27 Javascript
jQuery实现放大镜效果实例代码
2016/03/17 Javascript
AngularJS在IE8的不支持的解决方法
2016/05/13 Javascript
BootStrap Table 获取同行不同列元素的方法
2016/12/19 Javascript
BootStrapTable服务器分页实例解析
2016/12/20 Javascript
vue调用高德地图实例代码
2017/04/28 Javascript
BootStrap 表单控件之单选按钮水平排列
2017/05/23 Javascript
js获取html页面代码中图片地址的实现代码
2018/03/05 Javascript
详解在Vue中使用TypeScript的一些思考(实践)
2018/07/06 Javascript
详解webpack-dev-server使用方法
2018/09/14 Javascript
JS 验证码功能的三种实现方式
2018/11/26 Javascript
python笔记(2)
2012/10/24 Python
python写的ARP攻击代码实例
2014/06/04 Python
python中的decimal类型转换实例详解
2019/06/26 Python
python Django框架实现web端分页呈现数据
2019/10/31 Python
Python3 元组tuple入门基础
2020/02/09 Python
Python抓包程序mitmproxy安装和使用过程图解
2020/03/02 Python
python数据库操作mysql:pymysql、sqlalchemy常见用法详解
2020/03/30 Python
python实现图片转换成素描和漫画格式
2020/08/19 Python
实例讲解CSS3中的border-radius属性
2015/08/18 HTML / CSS
CSS3 3D酷炫立方体变换动画的实现
2019/03/26 HTML / CSS
HTML5中input输入框默认提示文字向左向右移动的示例代码
2020/09/10 HTML / CSS
美国电子产品折扣网站:Daily Steals
2017/05/20 全球购物
澳大利亚婴儿喂养品牌:Cherub Baby
2018/11/01 全球购物
厨房管理计划书
2014/04/27 职场文书
2014老师三严三实对照检查材料思想汇报
2014/09/18 职场文书
经营场所使用证明
2015/06/19 职场文书
OpenCV-Python实现人脸磨皮算法
2021/06/07 Python
MySQL子查询中order by不生效问题的解决方法
2021/08/02 MySQL
微信小程序结合ThinkPHP5授权登陆后获取手机号
2021/11/23 PHP
世界十大动漫制作公司排行榜,迪士尼上榜,第二是美国代表性文化符
2022/03/18 欧美动漫
SONY600GR,国产收音机厂商永远的痛
2022/04/05 无线电
Python识别花卉种类鉴定网络热门植物并自动整理分类
2022/04/08 Python