多个datatable共存造成多个表格的checkbox都被选中 - Web前端
作者:98wpeu发布时间:2026-06-09分类:网页前端技术浏览:80
导读:【问题原因】这个应该是JQuery.datatable控件本身的一个缺陷。该控件中的checkbox小插件的id是写死的,所以当有多个datatable引用到一个页面中的时...
【问题原因】
这个应该是 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('<inputtype="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');
}
这个应该是 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('<inputtype="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');
}
相关推荐
- jquery中获取id值方法小结 - Web前端
- 简单常用的幻灯片播放实现代码 - Web前端
- jquery阻止冒泡事件使用模拟事件 - Web前端
- jQuery动画效果-fadeIn fadeOut淡入浅出示例代码 - Web前端
- jquery实现div阴影效果示例代码 - Web前端
- jQuery .attr()和.removeAttr()方法操作元素属性示例 - Web前端
- JQuery判断子iframe何时加载完成解决方案 - Web前端
- 实测jquery data()如何存值 - Web前端
- jquery特效 幻灯片效果示例代码 - Web前端
- jQuery function的正确书写方法 - Web前端
- 网页前端技术排行
-
- 1[Web前端]用javascript实现默认图片替代未显示的图片 - Web前端
- 2分析Iconfont-阿里巴巴矢量常用图标库 - Web前端
- 3【第六章】Foundation之按钮和下拉功能 - Web前端
- 4基于jquery的滚动条滚动固定div(附演示下载) - Web前端
- 5jQuery实例教程:制作网页中可折叠的面板 - Web前端
- 6jQuery编写widget的一些技巧分享 - Web前端
- 7jQuery实现鼠标移到元素上动态提示消息框效果 - Web前端
- 8在Mac/PC上远程调试iPhone/iPad上的网页 - Web前端
- 9分享精心挑选的12款优秀jQuery Ajax分页插件和教程 - Web前端
- 最近发表
-
- WordPress随机显示特色图片插件:Random Post Thumbnails
- KeePass实现Chrome浏览器自动填充密码方法一
- LNMP一键包nginx 301强制跳转到https教程
- KeePass实现Chrome浏览器自动填充密码方法二
- #建站# 免费的VPS管理软件Xshell8/Xftp8中文版下载
- 使用Xshell 8连接VPS教程_电脑登录vps的方法
- WordPress评论界面添加烟花????效果
- 不同浏览器书签同步方案:坚果云+Floccus_详细使用教程
- iOS端KeePassXC客户端APP:Strongbox Password Safe
- 给WordPress评论中的Gravatar头像图片添加ALT属性


