多个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 相关文章推荐
window.showModalDialog参数传递中含有特殊字符的处理方法
Jun 06 Javascript
js 判断文件类型并控制表单提交示例代码
Nov 14 Javascript
jquery使用jquery.zclip插件复制对象的实例教程
Dec 04 Javascript
QQ空间顶部折页撕开效果示例代码
Jun 15 Javascript
JavaScript中Number.NEGATIVE_INFINITY值的使用详解
Jun 05 Javascript
一分钟理解js闭包
May 04 Javascript
javascript中使用未定义变量或值的情况分析
Jul 19 Javascript
Javascript for in的缺陷总结
Feb 03 Javascript
浅谈在Vue-cli里基于axios封装复用请求
Nov 06 Javascript
详解vue的数据劫持以及操作数组的坑
Apr 18 Javascript
全面分析JavaScript 继承
May 30 Javascript
js实现轮播图效果 z-index实现轮播图
Jan 17 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
给apache2.2加上mod_encoding模块後 php5.2.0 处理url出现bug
2007/04/12 PHP
php下尝试使用GraphicsMagick的缩略图功能
2011/01/01 PHP
PHP数组相关函数汇总
2015/03/24 PHP
PHP函数shuffle()取数组若干个随机元素的方法分析
2016/04/02 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
php处理抢购类功能的高并发请求
2018/02/08 PHP
javascript instanceof 与typeof使用说明
2010/01/11 Javascript
JavaScript 判断判断某个对象是Object还是一个Array
2010/01/28 Javascript
用jQuery打造TabPanel效果代码
2010/05/22 Javascript
按给定几率进行随机抽取的js代码
2010/12/28 Javascript
jQuery实现的一个tab切换效果内部还嵌有切换
2014/08/10 Javascript
JS控制弹出新页面窗口位置和大小的方法
2015/03/02 Javascript
JavaScript中扩展Array contains方法实例
2020/08/23 Javascript
整理JavaScript创建对象的八种方法
2015/11/03 Javascript
jQuery源码分析之init的详细介绍
2017/02/13 Javascript
原生js实现倒计时--2018
2017/02/21 Javascript
js实现4个方向滚动的球
2017/03/06 Javascript
React中jquery引用的实现方法
2017/09/12 jQuery
js 图片转base64的方式(两种)
2018/04/24 Javascript
微信小程序实现留言板
2018/10/31 Javascript
微信小程序实现动态显示和隐藏某个控件功能示例
2018/12/14 Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
2019/05/04 jQuery
webpack打包优化的几个方法总结
2020/02/10 Javascript
通过angular CDK实现页面元素拖放的步骤详解
2020/07/01 Javascript
[01:10]DOTA2次级职业联赛 - EP战队宣传片
2014/12/01 DOTA
跟老齐学Python之做一个小游戏
2014/09/28 Python
Python中多线程及程序锁浅析
2015/01/21 Python
Python3实现的字典、列表和json对象互转功能示例
2018/05/22 Python
python自动发送测试报告邮件功能的实现
2019/01/22 Python
Django urls.py重构及参数传递详解
2019/07/23 Python
python神经网络编程实现手写数字识别
2020/05/27 Python
Python日志器使用方法及原理解析
2020/09/27 Python
2014年党务公开工作总结
2014/12/09 职场文书
浅谈移动端中的视口(viewport)的具体使用
2021/04/13 HTML / CSS
python 办公自动化——基于pyqt5和openpyxl统计符合要求的名单
2021/05/25 Python
原生JavaScript实现简单五子棋游戏
2021/06/28 Javascript