Multiple jquery. Datatable coexisting a quick solution for checkbox to select all exceptions
- 2020-03-30 00:45:29
- OfStack
[reasons for the problem]
This should be a bug in the jquery.datatable control itself. The id of the checkbox widget in this control is dead, so when there are multiple datatables referenced to a page, the select event matches all datatables, causing all checkboxes for multiple tables to be selected.
[solution]
So it's best to modify the jquery.datatable control to assign a different id to the checkbox under each datatable generated. Since the datatable's id is not the same, you can prefix the datatable's id with a unique id for the checkbox. The specific checkbox call event also needs to be synchronously replaced with the new id to make the event call.
[modify file]
Jqurey. Datatable. Ext js (v0.0.1)
1. Init method modification:
$("#"+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 method modification:
$("#chk_all").click(function(){
==>
$("#"+$.fn.datatable_ext.defaults.select_table+"_chk_all").click(function(){
3. SubscribeChk method modification:
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');
}