多个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和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
Dec 14 Javascript
JS获取几种URL地址的方法小结
Feb 26 Javascript
jquery中append()与appendto()用法分析
Nov 14 Javascript
JQuery日历插件My97DatePicker日期范围限制
Jan 20 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
Aug 30 Javascript
BootStrap 可编辑表Table格
Nov 24 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
Feb 09 Javascript
微信小程序tabbar不显示解决办法
Jun 08 Javascript
H5基于iScroll实现下拉刷新和上拉加载更多
Jul 18 Javascript
vue与bootstrap实现时间选择器的示例代码
Aug 26 Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
Dec 22 Javascript
js调用设备摄像头的方法
Jul 19 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面向对象全攻略 (一) 面向对象基础知识
2009/09/30 PHP
php set_time_limit(0) 设置程序执行时间的函数
2010/05/26 PHP
PHP全概率运算函数(优化版) Webgame开发必备
2011/07/04 PHP
PHP 自定义错误处理函数的使用详解
2013/05/10 PHP
laravel学习笔记之模型事件的几种用法示例
2017/08/15 PHP
Laravel中批量赋值Mass-Assignment的真正含义详解
2017/09/29 PHP
PHP简单实现图片格式转换(jpg转png,gif转png等)
2019/10/30 PHP
ExtJs之带图片的下拉列表框插件
2010/03/04 Javascript
一个收集图片的bookmarlet(js 刷新页面中的图片)
2010/05/27 Javascript
document.createElement()用法
2013/03/13 Javascript
简单理解JavaScript中的封装与继承特性
2016/03/19 Javascript
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
2016/12/07 Javascript
javascript 动态生成css代码的两种方法
2017/03/17 Javascript
详解webpack进阶之loader篇
2017/08/23 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
2017/12/25 jQuery
微信小程序显示倒计时功能示例【测试可用】
2018/12/03 Javascript
@angular前端项目代码优化之构建Api Tree的方法
2018/12/24 Javascript
nodejs一个简单的文件服务器的创建方法
2019/09/13 NodeJs
VUE注册全局组件和局部组件过程解析
2019/10/10 Javascript
nodejs开发一个最简单的web服务器实例讲解
2020/01/02 NodeJs
Python的加密模块md5、sha、crypt使用实例
2014/09/28 Python
python实现自动解数独小程序
2019/01/21 Python
Django 表单模型选择框如何使用分组
2019/05/16 Python
Pandas_cum累积计算和rolling滚动计算的用法详解
2019/07/04 Python
增大python字体的方法步骤
2020/07/05 Python
德国孕妇装和婴童服装网上商店:bellybutton
2018/04/12 全球购物
Lookfantastic香港官网:英国知名美妆购物网站
2018/06/19 全球购物
趣天网日本站:Qoo10 JP
2019/09/18 全球购物
JBL美国官方商店:扬声器、耳机等
2019/12/01 全球购物
3D空间设计学生找工作的自我评价
2013/10/28 职场文书
学生处主任岗位职责
2013/12/01 职场文书
2014年新农村建设工作总结
2014/12/01 职场文书
2015年党员岗位承诺书
2015/04/27 职场文书
SpringCloud之@FeignClient()注解的使用方式
2021/09/25 Java/Android
Kubernetes控制节点的部署
2022/04/01 Servers
MySQL transaction事务安全示例讲解
2022/06/21 MySQL