多个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 获取(接收)地址栏参数值的方法
Apr 01 Javascript
运算符&amp;&amp;的三个不同层次
Apr 07 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
Nov 19 Javascript
解析Javascript小括号“()”的多义性
Dec 03 Javascript
jQuery实现在textarea指定位置插入字符或表情的方法
Mar 11 Javascript
js改变html的原有内容实现方法
Oct 05 Javascript
JS改变页面颜色源码分享
Feb 24 Javascript
vue动画打包后失效问题的解决方法
Sep 18 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
Oct 11 Javascript
基于layui的table插件进行复选框联动功能的实现方法
Sep 19 Javascript
jdk1.8+vue elementui实现多级菜单功能
Sep 24 Javascript
JavaScript实现表单验证功能
Dec 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写的小东西
2006/12/06 PHP
PHP explode()函数用法、切分字符串
2012/10/03 PHP
ioncube_loader_win_5.2.dll的错误解决方法
2015/01/04 PHP
对比分析php中Cookie与Session的异同
2016/02/19 PHP
Google Map Api和GOOGLE Search Api整合实现代码
2009/07/18 Javascript
jquery ready(fn)事件使用介绍
2013/08/21 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
2015/03/09 Javascript
JavaScript移除数组内重复元素的方法
2015/03/18 Javascript
jQuery easyui刷新当前tabs的方法
2016/09/23 Javascript
Javascript 正则表达式校验数字的简单实例
2016/11/02 Javascript
jQuery日程管理控件glDatePicker用法详解
2017/03/29 jQuery
Angular2环境搭建具体操作步骤(推荐)
2017/08/04 Javascript
Postman模拟发送带token的请求方法
2018/03/31 Javascript
微信小程序ibeacon三点定位详解
2018/10/31 Javascript
详解iview的checkbox多选框全选时校验问题
2019/06/10 Javascript
浅谈vue项目用到的mock数据接口的两种方式
2019/10/09 Javascript
Vue可自定义tab组件用法实例
2019/10/24 Javascript
浅析js实现网页截图的两种方式
2019/11/01 Javascript
JS中作用域以及变量范围分析
2020/07/18 Javascript
antd多选下拉框一行展示的实现方式
2020/10/31 Javascript
[02:55]DOTA2英雄基础教程 发条技师
2013/12/04 DOTA
基于wxpython实现的windows GUI程序实例
2015/05/30 Python
python的pdb调试命令的命令整理及实例
2017/07/12 Python
opencv python 2D直方图的示例代码
2018/07/20 Python
pycharm运行和调试不显示结果的解决方法
2018/11/30 Python
PyQt5 控件字体样式等设置的实现
2020/05/13 Python
详解如何使用Pytest进行自动化测试
2021/01/14 Python
html5贪吃蛇游戏使用63行代码完美实现
2013/06/25 HTML / CSS
兰蔻加拿大官方网站:Lancome加拿大
2016/08/05 全球购物
命名空间(namespace)和程序集(Assembly)有什么区别
2015/09/25 面试题
护士求职信
2014/07/05 职场文书
2015年党建工作总结
2015/03/30 职场文书
交通处罚决定书
2015/06/24 职场文书
2016拓展训练心得体会范文
2016/01/12 职场文书
《家世》读后感:看家训的力量
2019/12/30 职场文书
Python docx库删除复制paragraph及行高设置图片插入示例
2022/07/23 Python