多个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 相关文章推荐
Exitjs获取DataView中图片文件名
Nov 26 Javascript
IE 当eval遇上function的处理
Aug 09 Javascript
jQuery JSON实现无刷新三级联动实例探讨
May 28 Javascript
javascript制作坦克大战全纪录(1)
Nov 27 Javascript
Javascript writable特性介绍
Feb 27 Javascript
JS基于myFocus库实现各种功能的tab选项卡切换效果
Sep 19 Javascript
原生js三级联动的简单实现代码
Jun 07 Javascript
AngularJS ng-bind-html 指令详解及实例代码
Jul 30 Javascript
原生js实现ajax方法(超简单)
Sep 20 Javascript
vscode 开发Vue项目的方法步骤
Nov 25 Javascript
微信小程序实现点击导航条切换页面
Nov 19 Javascript
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
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实现链结人气统计
2006/10/09 PHP
php中hashtable实现示例分享
2014/02/13 PHP
美图秀秀web开放平台--PHP流式上传和表单上传示例分享
2014/06/22 PHP
PHP实现将textarea的值根据回车换行拆分至数组
2015/06/10 PHP
简单实用jquery版三级联动select示例
2013/07/04 Javascript
JavaScript蒙板(model)功能的简单实现代码
2016/08/04 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
2016/10/17 Javascript
webpack本地开发环境无法用IP访问的解决方法
2018/03/20 Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
2018/05/31 jQuery
nodejs实现套接字服务功能详解
2018/06/21 NodeJs
关于Vue组件库开发详析
2018/07/01 Javascript
解决微信小程序防止无法回到主页的问题
2018/09/28 Javascript
js form表单input框限制20个字符,10个汉字代码实例
2019/04/12 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
2020/02/28 Javascript
vue 解决addRoutes多次添加路由重复的操作
2020/08/04 Javascript
vue3.0封装轮播图组件的步骤
2021/03/04 Vue.js
Python的Flask框架中的Jinja2模板引擎学习教程
2016/06/30 Python
Python操作Access数据库基本步骤分析
2016/09/19 Python
Python切片操作实例分析
2018/03/16 Python
Django基于ORM操作数据库的方法详解
2018/03/27 Python
python实现对求解最长回文子串的动态规划算法
2018/06/02 Python
python存储16bit和32bit图像的实例
2018/12/05 Python
python3实现多线程聊天室
2018/12/12 Python
numpy concatenate数组拼接方法示例介绍
2019/05/27 Python
python+selenium 简易地疫情信息自动打卡签到功能的实现代码
2020/08/22 Python
python飞机大战游戏实例讲解
2020/12/04 Python
南威尔士家居商店:Leekes
2016/10/25 全球购物
世界上最大的艺术和工艺用品商店:MisterArt.com
2018/07/13 全球购物
Yves Rocher捷克官方网站:植物化妆品的创造者
2019/07/31 全球购物
Quiksilver荷兰官方网站:冲浪和滑雪板
2019/11/16 全球购物
台湾7-ELEVEN线上购物中心:7-11
2021/01/21 全球购物
美国沃尔玛网上超市:Walmart
2020/08/14 全球购物
联想智利官方网站:Lenovo Chile
2020/06/03 全球购物
2016年艾滋病宣传活动总结
2016/04/01 职场文书
Ajax常用封装库——Axios的使用
2021/05/08 Javascript
CSS实现五种常用的2D转换
2021/12/06 HTML / CSS