多个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 相关文章推荐
Auntion-TableSort国人写的一个javascript表格排序的东西
Nov 12 Javascript
基于jQuery的可以控制左右滚动及自动滚动效果的代码
Jul 25 Javascript
js二级地域选择的实现方法
Jun 17 Javascript
JavaScript的21条基本知识点
Mar 04 Javascript
js锁屏解屏通过对$.ajax进行封装实现
Jul 31 Javascript
Javascript基础教程之for循环
Jan 18 Javascript
基于Javascript倒计时效果
Dec 22 Javascript
jquery easyui dataGrid动态改变排序字段名的方法
Mar 02 Javascript
Angular 2父子组件之间共享服务通信的实现
Jul 04 Javascript
详解基于vue的移动web app页面缓存解决方案
Aug 03 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
Aug 16 Javascript
layer 刷新某个页面的实现方法
Sep 05 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常用image图像函数集
2013/06/24 PHP
解析php通过cookies获取远程网页的指定代码
2013/06/25 PHP
php中url传递中文字符,特殊危险字符的解决方法
2013/08/17 PHP
PHP laravel中的多对多关系实例详解
2017/06/07 PHP
php更新cookie内容的详细方法
2019/09/30 PHP
jQuery数据缓存功能的实现思路及简单模拟
2013/05/27 Javascript
js正则表达式的使用详解
2013/07/09 Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
2015/08/17 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
2016/05/05 Javascript
javascript三种代码注释方法
2016/06/02 Javascript
js实现键盘自动打字效果
2016/12/23 Javascript
基于JS实现限时抢购倒计时间表代码
2017/05/09 Javascript
详解vue.js移动端导航navigationbar的封装
2017/07/05 Javascript
Vue-Router实现组件间跳转的三种方法
2017/11/07 Javascript
快速了解vue-cli 3.0 新特性
2018/02/28 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
2020/08/17 Javascript
[01:10:02]IG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python的Django框架中的select_related函数对QuerySet 查询的优化
2015/04/01 Python
理解python正则表达式
2016/01/15 Python
用Python将mysql数据导出成json的方法
2018/08/21 Python
Python 给某个文件名添加时间戳的方法
2018/10/16 Python
对Python中for复合语句的使用示例讲解
2018/11/01 Python
Python面向对象原理与基础语法详解
2020/01/02 Python
HTML5 input新增type属性color颜色拾取器的实例代码
2018/08/27 HTML / CSS
《湘夫人》教学反思
2014/02/21 职场文书
内衣营销方案
2014/03/15 职场文书
文明倡议书范文
2014/04/15 职场文书
《永远的白衣战士》教学反思
2014/04/25 职场文书
捐款倡议书格式范文
2014/05/14 职场文书
银行金融服务方案
2014/06/11 职场文书
小学综合实践活动总结
2014/07/07 职场文书
酒店总经理岗位职责范本
2014/08/08 职场文书
工程项目经理岗位职责
2015/02/02 职场文书
八年级作文之友情
2019/11/25 职场文书
TV动画「神渣☆爱豆」公开第一弹主视觉图
2022/03/21 日漫
小程序实现侧滑删除功能
2022/06/25 Javascript