Multiple jquery.datatable coexistence, quick solution to abnormal checkbox selection_javascript skills

[Cause of the problem]

This should be a defect of the jquery.datatable control itself. The ID of the checkbox plug-in in this control is hard-coded, so when multiple datatables are referenced on a page, the select all event will match all datatables, causing all checkboxes of multiple tables to be selected.

【Solution】

So it is best to modify the jquery.datatable control and give different ids to the checkboxes under each generated datatable. Because the ids of the datatable are different, you can use the id of the datatable as the prefix of the checkbox to form a unique id. The specific call event of this checkbox also needs to be synchronized and replaced with this new ID to call the event.

[Modify file]

jqurey.datatable.ext.js (v0.0.1)

1. Modify the init method:

Copy the code The code is as follows:

$("#" options.select_table).find('thead tr th:first-child')
.prepend('');

==>

$("#" options.select_table).find('thead tr th:first-child')
.prepend('');

2.subscribeAllChk method modification:

Copy code The code is as follows:

$("#chk_all").click(function(){

==>

$("#" $.fn.datatable_ext.defaults.select_table "_chk_all").click(function(){

3.subscribeChk method modification:

Copy code The code is as follows:

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