Switched to jquery 3.3.1, all rows on pages 2+ no longer recognized by jquery events.

aliciagontarek

Has anyone experienced this? I recently upgraded from jquery 2.1.4 to 3.3.1 and now when I try to select rows on any page other than the first, it won't select them. Also all other jquery click events on those rows are ignored. When I switch back to 2.1.4, everything works fine. I have the displayLength set to 10...so items 11+ are ignored. If I increase to 25, then 26+ are ignored. Furthermore, those that are ignored, remain that way even if I sort (after initializing) and they move from the last page to the first. It's very odd. I have tried changing multiple options to no avail. Any suggestions are greatly appreciated. Here is my code:
function initialize_ClassTab() {
resultsTable = $('#results-table').dataTable({
"bFilter": true,
"bInfo": true,
"bPaginate": true,
"aLengthMenu": [ 10, 25, 50, 75, 100 ],
"bSort": true,
"bLengthChange": true,
"bStateSave": false,
"iDisplayLength": 10,
"dom": 'lfrtip',
"tableTools": {
//"sRowSelect": "multi",
"aButtons": []
},
"oLanguage": {
"sSearch": "Keyword Search:"
},
"columnDefs": [{
"targets": 0,
"searchable": false,
"orderable": false,
"width": "10px"
},{"targets": 1, "width": "50px"},{"targets": 8,
"visible": false},
{"targets": 9,
"visible": false}],
"order": [[9, 'asc'],[2, 'asc']],
"drawCallback": function (settings) {
var api = this.api();
var rows = api.rows( {page:'current'} ).nodes();
var last=null;
api.column(8, {page:'current'} ).data().each( function ( group, i ) {
if ( last !== group ) {
if (group !== "<span>Checked-In</span>") {
$(rows).eq(i).before(
'<tr style="background-color:#bcbcbc" class="rowGroup"><td class="group" colspan="9"><input type="checkbox" onchange="selectRows(this)"/> ' + group + '</td></tr>');
} else {
$(rows).eq(i).before('<tr style="background-color:#bcbcbc" class="rowGroup"><td class="group" colspan="9">' + group + '</td></tr>');
}
last = group;
}
});
}
});

This function now will only select the rows on the first page.
//selects all rows in a group
function selectRows(d) {
var rows = $(d).closest("tr").nextUntil(".rowGroup").filter(":not('.rowGroup')");
rows.find(":checkbox").prop("checked", $(d).prop("checked"));
rows.each(function () {
if ($(d).prop("checked")) {
$(this).addClass("selected");
} else {
$(this).removeClass("selected");
}
});
}

Thanks in advance!!!

I am using version 1.10.6

allan

I am using version 1.10.6

That's a very old version. 1.10.18 is the current release. I'd suggest updating as the first step. If that doesn't resolve it, please link to a page showing the issue so we can help to debug it.

Allan

aliciagontarek

OK. I'll try that first.

aliciagontarek

FYI - after upgrading and some tweaking, I was able to get this to work.