多个datatable共存造成多个表格的checkbox都被选中 - Web前端
作者:98wpeu发布时间:2026-06-09分类:网页前端技术浏览:3
导读:【问题原因】这个应该是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 跳到顶部和底部动画2句代码简单实现 - Web前端
- jQuery 顶部导航跟随滚动条滚动固定浮动在顶部 - Web前端
- jQuery Animation实现CSS3动画示例介绍 - Web前端
- 实用的Jquery选项卡TAB示例代码 - Web前端
- jquery实现漂浮在网页右侧的qq在线客服插件示例 - Web前端
- jquery实现的一个导航滚动效果具体代码 - Web前端
- jQuery数据缓存功能的实现思路及简单模拟 - Web前端
- jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全 - Web前端
- jQuery 过滤方法filter()选择具有特殊属性的元素 - Web前端
- jQuery根据纬度经度查看地图处理程序 - 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属性


