多个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 相关文章推荐
使用jscript实现二进制读写脚本代码
Jun 09 Javascript
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
Nov 24 Javascript
5个最佳的Javascript日期处理类库分享
Apr 15 Javascript
开源的javascript项目Kissy介绍
Nov 28 Javascript
Vuex利用state保存新闻数据实例
Jun 28 Javascript
js使用html2canvas实现屏幕截取的示例代码
Aug 28 Javascript
js 显示日期时间的实例(时间过一秒加1)
Oct 25 Javascript
基于Datatables跳转到指定页的简单实例
Nov 09 Javascript
Vue实现内部组件轮播切换效果的示例代码
Apr 07 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 jQuery
vue 解除鼠标的监听事件的方法
Nov 13 Javascript
js实现select下拉框选择
Jan 11 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 搜索框提示(自动完成)实例代码
2012/02/05 PHP
simplehtmldom Doc api帮助文档
2012/03/26 PHP
探讨PHP中this,self,parent的区别详解
2013/06/08 PHP
微信支付开发交易通知实例
2016/07/12 PHP
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
2014/07/17 Javascript
JS实现完全语义化的网页选项卡效果代码
2015/09/15 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
2015/12/01 Javascript
Bootstrap和Java分页实例第二篇
2016/12/23 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
2017/01/19 Javascript
$.browser.msie 为空或不是对象问题的多种解决方法
2017/03/19 Javascript
Vue+axios 实现http拦截及路由拦截实例
2017/04/25 Javascript
JS设计模式之单例模式(一)
2017/09/29 Javascript
react build 后打包发布总结
2018/08/24 Javascript
Vue中android4.4不兼容问题的解决方法
2018/09/04 Javascript
性能优化篇之Webpack构建速度优化的建议
2019/04/03 Javascript
layui实现下拉框三级联动
2019/07/26 Javascript
[46:04]Liquid vs VP Supermajor决赛 BO 第四场 6.10
2018/07/05 DOTA
Python的另外几种语言实现
2015/01/29 Python
Python读取excel中的图片完美解决方法
2018/07/27 Python
Python爬虫基础之XPath语法与lxml库的用法详解
2018/09/13 Python
python绘制散点图并标记序号的方法
2018/12/11 Python
在python中将字符串转为json对象并取值的方法
2018/12/31 Python
python_mask_array的用法
2020/02/18 Python
Python 生成VOC格式的标签实例
2020/03/10 Python
世界上最具创新性的增强型知名运动品牌:Proviz
2018/04/03 全球购物
英国HYPE双肩包官网:英国本土时尚潮牌
2018/09/26 全球购物
新闻学专业个人求职信写作
2014/02/04 职场文书
法定代表人身份证明书(含说明)
2014/10/02 职场文书
党员个人剖析材料2014
2014/10/08 职场文书
教师见习报告范文
2014/11/03 职场文书
复活读书笔记
2015/06/29 职场文书
《成长的天空》读后感3篇
2019/12/06 职场文书
Nginx Rewrite使用场景及配置方法解析
2021/04/01 Servers
JS新手入门数组处理的实用方法汇总
2021/04/07 Javascript
SQL解决未能删除约束问题drop constraint
2022/05/30 SQL Server
关于pytest结合csv模块实现csv格式的数据驱动问题
2022/05/30 Python