多个datatable共存造成多个表格的checkbox都被选中 - Web前端
作者:98wpeu发布时间:2026-06-09分类:网页前端技术浏览:61
导读:【问题原因】这个应该是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倒计时源码分享 - Web前端
- jquery控制select的text/value值为选中状态 - Web前端
- jQuery 获取兄弟元素的几种不错方法 - Web前端
- jquery进行数组遍历如何跳出当前的each循环 - Web前端
- jQuery实现table隔行换色和鼠标经过变色的两种方法 - Web前端
- jquery得到iframe src属性值的方法 - Web前端
- jquery选择器使用详解 - Web前端
- jQuery实现鼠标经过图片预览大图效果 - Web前端
- HTML页面弹出居中可拖拽的自定义窗口层 - Web前端
- jquery跟js初始化加载的多种方法及区别介绍 - Web前端
- 网页前端技术排行
-
- 1【第六章】Foundation之按钮和下拉功能 - Web前端
- 2分析Iconfont-阿里巴巴矢量常用图标库 - Web前端
- 3jQuery编写widget的一些技巧分享 - Web前端
- 4在Mac/PC上远程调试iPhone/iPad上的网页 - Web前端
- 5基于jquery的滚动条滚动固定div(附演示下载) - Web前端
- 6jQuery实例教程:制作网页中可折叠的面板 - Web前端
- 7分享精心挑选的12款优秀jQuery Ajax分页插件和教程 - Web前端
- 8[Web前端]用javascript实现默认图片替代未显示的图片 - Web前端
- 9javascript原生和jquery库实现iframe自适应高度和宽度 - 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属性


