多个datatable共存造成多个表格的checkbox都被选中

时间:2024-05-11 09:18:42 

【问题原因】
这个应该是 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');
}
标签:datatable,共存,checkbox
0
投稿

猜你喜欢

  • Python数据分析之Python和Selenium爬取BOSS直聘岗位

    2021-04-27 08:53:19
  • Oracle数据库安全策略分析 (三)

    2010-07-31 13:24:00
  • pycharm2022.2远程连接服务器调试代码实现

    2022-11-17 12:12:48
  • mysql中int(3)和int(10)的数值范围是否相同

    2024-01-17 16:37:48
  • Python检查图片是否损坏及图片类型是否正确过程详解

    2021-04-07 22:26:12
  • Python保姆式手把手带你掌握异常的捕获和处理

    2022-04-30 14:10:18
  • 轻松掌握怎样从Windows命令行启动MySQL

    2009-02-23 17:18:00
  • 深入了解Python 变量作用域

    2023-06-08 10:01:15
  • Python 如何让特征值滞后一行

    2021-06-06 06:30:46
  • 简析Oracle数据库常见问题及解决方案

    2024-01-24 11:15:01
  • python如何重载模块实例解析

    2021-10-13 03:47:56
  • 在Go语言程序中使用gojson来解析JSON格式文件

    2023-07-02 14:19:52
  • mysql 8.0.12 安装配置方法并修改密码

    2024-01-19 14:49:05
  • 深入浅析Python科学计算库Scipy及安装步骤

    2022-06-29 12:11:30
  • 关于JS中变量的显式声明和隐式声明

    2008-10-06 13:22:00
  • python文件操作的简单方法总结

    2023-11-20 06:31:02
  • Linux 安装JDK Tomcat MySQL的教程(使用Mac远程访问)

    2024-01-16 12:12:47
  • Python实现对图像加噪(高斯噪声 椒盐噪声)

    2023-06-15 03:08:34
  • 得到文本框选中的文字,动态插入文字的js代码

    2024-05-03 15:31:03
  • python模拟表单提交登录图书馆

    2021-11-06 19:20:42
  • asp之家 网络编程 m.aspxhome.com