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');
     }


Related articles: