多个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 相关文章推荐
Jquery 高亮显示文本中重要的关键字
Dec 24 Javascript
JavaScript建立一个语法高亮输入框实现思路
Feb 26 Javascript
jQuery contains过滤器实现精确匹配使用方法
Apr 12 Javascript
JavaScript不刷新实现浏览器的前进后退功能
Nov 05 Javascript
JavaScript每天定时更换皮肤样式的方法
Jul 01 Javascript
浅谈jquery上下滑动的注意事项
Oct 13 Javascript
利用jQuery+localStorage实现一个简易的计时器示例代码
Dec 25 jQuery
VueRouter导航守卫用法详解
Dec 25 Javascript
解决Js先触发失去焦点事件再执行点击事件的问题
Aug 30 Javascript
详解关于React-Router4.0跳转不置顶解决方案
May 10 Javascript
vue中get请求如何传递数组参数的方法示例
Nov 08 Javascript
基于Vue+Webpack拆分路由文件实现管理
Nov 16 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
攻克CakePHP系列三 表单数据增删改
2008/10/22 PHP
一个完整的php文件上传类实例讲解
2015/10/27 PHP
PHP函数nl2br()与自定义函数nl2p()换行用法分析
2016/04/02 PHP
php往mysql中批量插入数据实例教程
2018/12/12 PHP
Laravel 创建可以传递参数 Console服务的例子
2019/10/14 PHP
javascript 45种缓动效果 非常酷
2011/06/28 Javascript
Extjs中使用extend(js继承) 的代码
2012/03/15 Javascript
同域jQuery(跨)iframe操作DOM(示例代码)
2013/12/13 Javascript
超简单JS二级、多级联动的简单实例
2014/02/18 Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
2015/08/24 Javascript
基于JavaScript实现移除(删除)数组中指定元素
2016/01/04 Javascript
微信小程序 wxapp导航 navigator详解
2016/10/31 Javascript
bootstrap警告框示例代码分享
2017/05/17 Javascript
Angularjs中ng-repeat的简单实例
2017/08/25 Javascript
nodejs微信开发之自动回复的实现
2019/03/17 NodeJs
详解elementui之el-image-viewer(图片查看器)
2019/08/30 Javascript
JS数组及对象遍历方法代码汇总
2020/06/16 Javascript
VUE Elemen-ui之穿梭框使用方法详解
2021/01/19 Javascript
python连接MySQL数据库实例分析
2015/05/12 Python
Python的Django应用程序解决AJAX跨域访问问题的方法
2016/05/31 Python
Python常用算法学习基础教程
2017/04/13 Python
Python数据拟合与广义线性回归算法学习
2017/12/22 Python
Python实现Kmeans聚类算法
2020/06/10 Python
python获取文件真实链接的方法,针对于302返回码
2018/05/14 Python
python opencv人脸检测提取及保存方法
2018/08/03 Python
Python实现正则表达式匹配任意的邮箱方法
2018/12/20 Python
使用Python实现文字转语音并生成wav文件的例子
2019/08/08 Python
如何基于Python + requests实现发送HTTP请求
2020/01/13 Python
Django之choices选项和富文本编辑器的使用详解
2020/04/01 Python
python爬虫如何解决图片验证码
2021/02/14 Python
初三学习计划书范文
2014/04/30 职场文书
植树节口号
2014/06/21 职场文书
2015年小学生新年寄语
2014/12/08 职场文书
高中团支书竞选稿
2015/11/21 职场文书
Nginx如何配置多个服务域名解析共用80端口详解
2022/09/23 Servers
js 实现验证码输入框示例详解
2022/09/23 Javascript