本文分析了jQuery DataTable插件在页面存在多个实例时,因Checkbox ID写死导致全选功能失效的问题。通过修改源码,将生成的Checkbox ID与对应DataTable的ID结合,生成唯一标识符,并同步更新相关事件监听器,从而解决多表格共存时的全选异常。
问题原因分析
【问题原因】
该现象源于jQuery DataTable控件自身的缺陷。当页面中引入多个DataTable实例时,由于控件内Checkbox小插件的ID被硬编码为固定值,导致全选事件触发时,会同时匹配所有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');
}