Использование флажка в таблицах данных возвращает неверный массив

Question

Я пытаюсь установить флажок в моих таблицах данных. Когда строка выбрана, я буду хранить информацию из этой строки (имя) в массиве. После этого я могу выполнить функцию для этого массива.

DataTatable работает с нумерацией страниц и переменной страницей, вот в чем проблема.

Случай:

Datatables с длиной 10 элементов на странице. Я выбираю несколько из первых 10 строк. Я изменяю длину страницы с 10 до 25, выбираю больше строк из новых 15 строк, и они появятся в selectedArray. Но когда я сниму флажок с первых 10 строк, они будут удалены из массива и будут повторно помещены в массив. Такое поведение будут иметь только те, которые были проверены до того, как я установил длину страницы, другие даже не отображаются.

Логический пример:

Размер страницы массива 10, x = выбрано

[(x)test1, (x)test2, test3, .., test10]

selectedArray
[test1, test2]

Размер страницы 10 -> 25

[(x)test1, (x)test2, test3, .., (x)test11, (x)test12, .., test25]

selectedArray
[test1, test2, test11, test12]

Отменить выбор строки из первых 10

[test1, (x)test2, test3, .., (x)test11, (x)test12, .., test25]

selectedArray
[test2, test11, test12, test1]

Снова выбрать строку из первых 10

[(x)test1, (x)test2, test3, .., (x)test11, (x)test12, .., test25]

selectedArray
[test2, test11, test12, test1]

test3 никогда не появится в списке после изменения размера страницы 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;
}

строка выглядит как

<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>

Кто-нибудь получил решение?

Answer 1

Оказалось, моя реализация привязки была неправильной. Это мое решение:

rowCallback: (row: Node, data: object, index: number) => {
          const checkbox =  $('td:first input',row);
          checkbox.prop('checked', this.isSelected(data['name']));
          checkbox.unbind();
          checkbox.click(() => this.selectPackage(data['name']));
          return row
}