多个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 源代码显示控件 (Ajax加载方式).
May 18 Javascript
用 Javascript 验证表单(form)中多选框(checkbox)值
Sep 08 Javascript
用jquery等比例控制图片宽高的具体实现
Jan 28 Javascript
js判断undefined类型示例代码
Feb 10 Javascript
实现js保留小数点后N位的代码
Nov 13 Javascript
JS实现DIV容器赋值的方法
Dec 14 Javascript
javascript基础知识分享之类与函数化
Feb 13 Javascript
JS简单实现String转Date的方法
Mar 02 Javascript
JS弹出新窗口被拦截的解决方法
Aug 09 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
May 09 Javascript
vue+element模态框中新增模态框和删除功能
Jun 11 Javascript
详解vue高级特性
Jun 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之CodeIgniter学习笔记
2013/06/17 PHP
php操作csv文件代码实例汇总
2014/09/22 PHP
js 模拟气泡屏保效果代码
2010/07/10 Javascript
js获取指定日期前后的日期代码
2013/08/20 Javascript
前台js对象在后台转化java对象的问题探讨
2013/12/20 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
2015/09/19 Javascript
JavaScript模块规范之AMD规范和CMD规范
2015/10/27 Javascript
JavaScript DOM 学习总结(五)
2015/11/24 Javascript
实例详解Nodejs 保存 payload 发送过来的文件
2016/01/14 NodeJs
基于Node.js的JavaScript项目构建工具gulp的使用教程
2016/05/20 Javascript
JavaScript手机振动API
2016/06/11 Javascript
onmouseover事件和onmouseout事件全面理解
2016/08/15 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
2016/08/24 Javascript
jQuery插件autocomplete使用详解
2017/02/04 Javascript
详解打造 Vue.js 可复用组件
2017/03/24 Javascript
Vue添加请求拦截器及vue-resource 拦截器使用
2017/11/23 Javascript
浅谈React的最大亮点之虚拟DOM
2018/05/29 Javascript
js 计数排序的实现示例(升级版)
2020/01/12 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
2020/11/07 Javascript
[06:06]2018DOTA2亚洲邀请赛主赛事第四日战况回顾 全明星赛欢乐上演
2018/04/07 DOTA
Python实现多并发访问网站功能示例
2017/06/19 Python
python实现多进程代码示例
2018/10/31 Python
Python从Excel中读取日期一列的方法
2018/11/28 Python
Python学习笔记之抓取某只基金历史净值数据实战案例
2019/06/03 Python
python程序 创建多线程过程详解
2019/09/23 Python
Python气泡提示与标签的实现
2020/04/01 Python
使用Matplotlib绘制不同颜色的带箭头的线实例
2020/04/17 Python
Django实现图片上传功能步骤解析
2020/04/22 Python
大三学生入党思想汇报
2014/01/02 职场文书
《画》教学反思
2014/04/14 职场文书
政工例会汇报材料
2014/08/26 职场文书
2014教师教育实践活动对照检查材料思想汇报
2014/09/21 职场文书
听课评课活动心得体会
2016/01/15 职场文书
2016年情人节广告语
2016/01/28 职场文书
年终奖金发放管理制度,中小企业适用,拿去救急吧!
2019/07/12 职场文书
人生感悟经典句子
2019/08/20 职场文书