欢迎您访问我爱IT技术网,今天小编为你分享的javascript教程:【多个datatable共存造成多个表格的checkbox都被选中】,下面是详细的讲解!
多个datatable共存造成多个表格的checkbox都被选中
【问题原因】
这个应该是 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都被选中的用户互动如下:
相关问题:winform怎样通过多个checkbox把数据存放在数据库中...
答:放数据库就是选中的值,读出来就页面载入的时候itemadd加进去 >>详细
相关问题:当多复选框的其中一个被选中时,立即触发一个效果,...
答:like this? $(function(){ $('input:checkbox').on('change', function(){ if($('input:checkbox:checked').val()) { alert('有选中的,要效果'); } }) }); >>详细
相关问题:js datatable第一个页面选中2个checkbook,在第二...
答:建议做个数组自己维护,监听checkbox的change事件,添加或者删除这个数组的元素;一般的datatable翻页之后,这些纪录都没有了,自己做省心也方便。 >>详细
- 【firefox】firefox浏览器不支持innerText的解决
- 【Extjs】Extjs学习过程中新手容易碰到的低级错误
- 【clearInterval】js clearInterval()方法的定义
- 【ComboBox】ComboBox 和 DateField 在IE下消失的
- 【dom】javascript dom追加内容实现示例-追加内容
- 【checkbox】让checkbox不选中即将选中的checkbox
- 【Array】js中更短的 Array 类型转换-类型转换
- 【append】append和appendTo的区别以及appendChil
- 【ExtJs】ExtJs 表单提交登陆实现代码-表单提交-
- 【ajax清除浏览器缓存】Ajax清除浏览器js、css、
- 评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
-