多个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获取变量
Aug 24 Javascript
js修改原型的属性使用介绍
Jan 26 Javascript
jQuery自定义事件的简单实现代码
Jan 27 Javascript
如何将php数组或者对象传递给javascript
Mar 20 Javascript
JS中使用sort结合localeCompare实现中文排序实例
Jul 23 Javascript
JavaScript基础知识点归纳(推荐)
Jul 09 Javascript
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
Jul 03 Javascript
JavaScript实现二叉树的先序、中序及后序遍历方法详解
Oct 26 Javascript
学习使用ExpressJS 4.0中的新Router的用法
Nov 06 Javascript
javascript刷新父页面方法汇总详解
Oct 10 Javascript
JS document form表单元素操作完整示例
Jan 13 Javascript
Openlayers实现扩散的动态点(水纹效果)
Aug 17 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中获取主机名、协议及IP地址的方法
2014/11/18 PHP
Codeigniter的一些优秀特性总结
2015/01/21 PHP
php使用Jpgraph绘制复杂X-Y坐标图的方法
2015/06/10 PHP
CodeIgniter连贯操作的底层原理分析
2016/05/17 PHP
javascript下过滤数组重复值的代码
2007/09/10 Javascript
AlertBox 弹出层信息提示框效果实现步骤
2010/10/11 Javascript
jQuery提交表单ajax查询实例代码
2012/10/07 Javascript
文本框input聚焦失焦样式实现代码
2012/10/12 Javascript
Android中资源文件(非代码部分)的使用概览
2012/12/18 Javascript
jQuery中:submit选择器用法实例
2015/01/03 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
2015/11/30 Javascript
Bootstrap基本插件学习笔记之Popover提示框(19)
2016/12/08 Javascript
原生JS轮播图插件
2017/02/09 Javascript
vue组件实现文字居中对齐的方法
2017/08/23 Javascript
使用Vuex实现一个笔记应用的方法
2018/03/13 Javascript
VSCode使用之Vue工程配置eslint
2019/04/30 Javascript
微信小程序按钮点击动画效果的实现
2019/09/04 Javascript
JS中==、===你分清楚了吗
2020/03/04 Javascript
Python素数检测的方法
2015/05/11 Python
python将秒数转化为时间格式的实例
2018/09/16 Python
Python3爬虫使用Fidder实现APP爬取示例
2018/11/27 Python
用Python解决x的n次方问题
2019/02/08 Python
Python Selenium 之关闭窗口close与quit的方法
2019/02/13 Python
Python3enumrate和range对比及示例详解
2019/07/13 Python
django基于存储在前端的token用户认证解析
2019/08/06 Python
pytorch中nn.Conv1d的用法详解
2019/12/31 Python
关于初始种子自动选取的区域生长实例(python+opencv)
2020/01/16 Python
matplotlib bar()实现百分比堆积柱状图
2021/02/24 Python
Coach澳大利亚官方网站:美国著名时尚奢侈品牌
2017/05/24 全球购物
劲霸男装广告词
2014/03/21 职场文书
企业环保标语
2014/06/10 职场文书
教师师德师风个人整改方案
2014/09/18 职场文书
招标保密承诺书
2015/01/20 职场文书
2015年学校工作总结范文
2015/04/20 职场文书
数据分析数据库ClickHouse在大数据领域应用实践
2022/04/03 MySQL
nginx lua 操作 mysql
2022/05/15 Servers