多个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 相关文章推荐
Save a File Using a File Save Dialog Box
Jun 18 Javascript
一个简单的JavaScript数据缓存系统实现代码
Oct 24 Javascript
各浏览器对click方法的支持差异小结
Jul 31 Javascript
jquery 选择器引擎sizzle浅析
Feb 06 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
Oct 28 Javascript
浅析在javascript中创建对象的各种模式
May 06 Javascript
js实现横向拖拽导航条功能
Feb 17 Javascript
详解vue2.0脚手架的webpack 配置文件分析
May 27 Javascript
Angular4集成ng2-file-upload的上传组件
Mar 14 Javascript
微信小程序获取音频时长与实时获取播放进度问题
Aug 28 Javascript
vue click.stop阻止点击事件继续传播的方法
Sep 04 Javascript
说说如何在Vue.js中实现数字输入组件的方法
Jan 08 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
ajax php 实现写入数据库
2009/09/02 PHP
PHP入门教程之使用Mysqli操作数据库的方法(连接,查询,事务回滚等)
2016/09/11 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
Windows服务器中PHP如何安装redis扩展
2019/09/27 PHP
JavaScript flash复制库类 Zero Clipboard
2011/01/17 Javascript
checkbox全选所涉及到的知识点介绍
2013/12/31 Javascript
JS小游戏之宇宙战机源码详解
2014/09/25 Javascript
javascript比较两个日期的先后示例代码
2014/12/31 Javascript
JavaScript使用Replace进行字符串替换的方法
2015/04/14 Javascript
Easyui form combobox省市区三级联动
2016/01/13 Javascript
js实现不重复导入的方法
2016/03/02 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
2016/06/02 Javascript
Bootstrap CSS组件之输入框组
2016/12/17 Javascript
JavaScript中使用import 和require打包后实现原理分析
2018/03/07 Javascript
JavaScript设计模式之构造函数模式实例教程
2018/07/02 Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
2019/01/03 Javascript
Vue项目部署的实现(阿里云+Nginx代理+PM2)
2019/03/26 Javascript
pm2发布node配置文件ecosystem.json详解
2019/05/15 Javascript
解决layer.msg 不居中 ifram中的问题
2019/09/05 Javascript
Python交换变量
2008/09/06 Python
Python定时发送消息的脚本:每天跟你女朋友说晚安
2018/10/21 Python
解决Django部署设置Debug=False时xadmin后台管理系统样式丢失
2020/04/07 Python
工程师必须了解的LRU缓存淘汰算法以及python实现过程
2020/10/15 Python
草莓网化妆品日本站:Strawberrynet日本
2017/10/20 全球购物
几个常见的消息中间件(MOM)
2014/01/08 面试题
银行个人求职自荐信范文
2013/12/16 职场文书
面包店的创业计划书范文
2014/01/16 职场文书
党校个人自我鉴定范文
2014/03/28 职场文书
合伙协议书范本
2014/04/21 职场文书
教师对照四风自我剖析材料
2014/09/30 职场文书
学校纪律作风整改措施思想汇报
2014/10/11 职场文书
迟到检讨书
2015/01/26 职场文书
工程项目经理岗位职责
2015/02/02 职场文书
mysql5.7使用binlog 恢复数据的方法
2021/06/03 MySQL
Java 将PPT幻灯片转为HTML文件的实现思路
2021/06/11 Java/Android
详细聊聊Oracle表碎片对性能有多大的影响
2022/03/19 Oracle