多个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 相关文章推荐
检测是否已安装 .NET Framework 3.5的js脚本
Feb 14 Javascript
javascript 特殊字符串
Feb 25 Javascript
javascript实现简单查找与替换的方法
Jul 22 Javascript
js绘制购物车抛物线动画
Nov 18 Javascript
js实现文字向上轮播功能
Jan 13 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
Mar 15 Javascript
AngularJS中filter的使用实例详解
Aug 25 Javascript
Vue+axios实现统一接口管理的方法
Jul 23 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
Dec 11 Javascript
JQuery特殊效果和链式调用操作示例
May 13 jQuery
vue-router的hooks用法详解
Jun 08 Javascript
ES5和ES6中类的区别总结
Dec 21 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初学者最感迷茫的问题小结
2010/03/27 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
Javascript中Eval函数的使用
2010/03/23 Javascript
javascript页面渲染速度测试脚本分享
2014/04/15 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
2014/05/05 Javascript
JavaScript中的Math.LN2属性用法详解
2015/06/12 Javascript
jquery特效 点击展示与隐藏全文
2015/12/09 Javascript
解析浏览器端的AJAX缓存机制
2016/06/21 Javascript
Ztree新增角色和编辑角色回显问题的解决
2016/10/25 Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
2017/01/17 Javascript
浅谈JS验证表单文本域输入空格的问题
2017/02/14 Javascript
微信小程序 wx:for的使用实例详解
2017/04/27 Javascript
Vue项目组件化工程开发实践方案
2018/01/09 Javascript
JavaScript创建对象方法实例小结
2018/09/03 Javascript
使用vuepress搭建静态博客的示例代码
2019/02/14 Javascript
python操作日期和时间的方法
2014/03/11 Python
Python实现列表转换成字典数据结构的方法
2016/03/11 Python
Python学生成绩管理系统简洁版
2020/04/05 Python
Python读取视频的两种方法(imageio和cv2)
2018/04/15 Python
python获取当前目录路径和上级路径的实例
2018/04/26 Python
Python3中内置类型bytes和str用法及byte和string之间各种编码转换 问题
2018/09/27 Python
原来我一直安装 Python 库的姿势都不对呀
2019/11/11 Python
Python运行提示缺少模块问题解决方案
2020/04/02 Python
python mysql自增字段AUTO_INCREMENT值的修改方式
2020/05/18 Python
python高级特性简介
2020/08/13 Python
HTML5网页录音和上传到服务器支持PC、Android,支持IOS微信功能
2019/04/26 HTML / CSS
利用html5 canvas破解简单验证码及getImageData接口应用
2013/01/25 HTML / CSS
100%有机精油,美容油:House of Pure Essence
2018/10/30 全球购物
iHerb中文官网:维生素、保健品和健康产品
2018/11/01 全球购物
GAZMAN官网:澳大利亚领先的男装品牌
2019/12/19 全球购物
管理建议书范文
2014/05/13 职场文书
沙滩主题婚礼活动策划方案
2014/09/15 职场文书
2014国庆节演讲稿:祖国在我心中(400字)
2014/09/25 职场文书
机器人瓦力观后感
2015/06/12 职场文书
农村老人去世追悼词
2015/06/23 职场文书
vue中三级导航的菜单权限控制
2021/03/31 Vue.js