Home  >  Article  >  Web Front-end  >  The coexistence of multiple datatables causes the checkboxes of multiple tables to be selected_jquery

The coexistence of multiple datatables causes the checkboxes of multiple tables to be selected_jquery

WBOY
WBOYOriginal
2016-05-16 17:29:121248browse

[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, so the checkboxes of all multiple tables will be blocked. is selected.

[Solution]
So it is best to modify the jquery.datatable control and give a different id to the checkbox under each generated datatable. Because the id of the datatable is different, you can put the datatable The id is used as the prefix of the checkbox to form a unique id. Specifically, the 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. Init method modification:

Copy 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');
}
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn