Trying to integrate a checkbox into my datatables for row selection and storing selected information in array for further processing.
The datatable supports pagination and variable page lengths, but encounters an issue with the following scenario:
Scenario:
Datatables set with 10 items per page. Select multiple rows from the initial 10. Change page length to 25, select more rows which are added to the array. If unchecking the initially selected rows, they are removed and then re-added to the array if still checked. This behavior only applies to previously selected rows before changing the page length.
Example:
Array page size 10, x = selected
[(x)test1, (x)test2, test3, .., test10]selectedArray
[test1, test2]
Page size 10 -> 25
[(x)test1, (x)test2, test3, .., (x)test11, (x)test12, .., test25]selectedArray
[test1, test2, test11, test12]
Unselect row from first 10
[test1, (x)test2, test3, .., (x)test11, (x)test12, .., test25]selectedArray
[test2, test11, test12, test1]
Select row from first 10 again
[(x)test1, (x)test2, test3, .., (x)test11, (x)test12, .., test25]selectedArray
[test2, test11, test12, test1]
Test3 will not appear in the list after changing to page size 25.
Typescript Component
this.dtOptions = {
pagingType: 'full_numbers',
searching: true,
pageLength: 10,
processing:true,
responsive:true,
order: [[ 1, "asc" ]],
lengthChange: true,
lengthMenu: [[10, 15, 20, 25, 50], [10, 15, 20, 50]],
autoWidth: false,
stateSave: true,
stateDuration: 48,
retrieve: true,
paging: true,
columns: [
{ 'data': 'null', defaultContent: ''},
{ 'data': 'name'},
{ 'data': 'version' },
{ 'data': 'newVersion' },
{ 'data': 'null' }
],
columnDefs: [
{
targets : 0, render:function() {
return '<input type="checkbox" class="check" data-object-id="">';
}
}
],
rowCallback: (row: Node, data: object, index: number) => {
$('td', row).unbind('click');
$('td:first input',row).bind('click', () => { // CHECKBOX
this.selectPackage(data['name'])
if(this.isSelected(data['name'])){
$('input[type="checkbox"]', row).prop('checked');
}
})
return row;
},
ajax: ....
}
isSelected(name) {
return this.getIndexFrom(name) >= 0;
}
getIndexFrom(name) {
return this.selectedPackages.indexOf(name);
}
selectPackage(name) {
const index = this.selectedPackages.indexOf(name);
if (index >= 0) {
this.selectedPackages.splice(index, 1);
} else {
this.selectedPackages.push(name);
}
this.selectAll = false;
}
Row Structure
<tr role="row" class="even">
<td>
<input type="checkbox" class="check" data-object-id="">
</td>
<td class="sorting_1">
AA_test
</td>
<td></td>
<td>NaN</td>
<td></td>
</tr>
Looking for a solution or suggestions on how to address this issue.