Постраничный поиск по датам, возвращающий результат второй страницы

Question

В моем угловом приложении я использую таблицы данных, которые имеют следующие параметры:

strategyDatatbleOptions = {
    sDom: 'rt<"bottom"p>',
    ajax: (data, callback, settings) => {
      this.strategyDataService.getStrategiesData().subscribe((data) => {
        data = data.json().data;
        if (data == undefined) {
          data = [];
        }
        callback({
          aaData: data,
        })
      })
    },
    columns: [
      {
        data: 'name', 'width': '10%'
      },
      {
        data: 'executor.name', 'width': '10%',
        render: function (data, type, row) {
          if (data) {
            return data
          } else {
            return null;
          }
        }
      },
      {
        data: 'account.brokerId', 'width': '10%'
      },
      {
        data: 'properties', 'width': '15%'
      },
      {
        data: 'capital', 'width': '15%'
      },
      {
        data: 'createTime', 'width': '15%'
      },
      {
        data: 'updateTime', 'width': '15%'
      },
      {
        data: null, 'width': '10%',
        orderable: false,
        className: 'editcenter',
        defaultContent:
          '<a class="clone_save"> <i class="fa fa-clone"></i></a>',
        responsivePriority: 2
      },
      {
        data: 'active', 'width': '5%',
        render: function (data, type, row) {
          if (data) {
            // return data;
            return '<form class="smart-form"><label class="toggle"><input id="contracts" type="checkbox" name="checkbox-toggle"  checked="checked" /><i  style="border-radius: 0px;top :2px;;" data-swchon-text="ON" data-swchoff-text="OFF"></i></label></form>';
          } else {
            // return data;
            return '<form class="smart-form"><label class="toggle"><input id="contracts" type="checkbox"  name="checkbox-toggle" /><i  style="border-radius: 0px;top :2px;;" data-swchon-text="ON" data-swchoff-text="OFF"></i></label></form>';
          }
        },
        "targets": 2
      }
    ],
    rowCallback: (row: Node, data: any | Object, index: number) => {
      $('input', row).unbind('click');
      $('input', row).bind('click', () => {
        let toggleSwitch = event.target as any;
        let status = toggleSwitch.checked;
        this.strategyDataService.changeStrategyStatus(data.name, status).subscribe(response => response.code);
      });
      //Clone Strategy
      $('a.clone_save', row).unbind('click');
      $('a.clone_save', row).bind('click', () => {
        this.cloneStrategy(data);
      })
    },
    "pageLength": 2
  }

Теперь в html-шаблоне у меня есть собственные поля поиска, которые выглядят так:

Datatable Image

Это поле поиска будет искать и возвращать столбец результатов в разумных пределах.

Код результата поиска

columnSearch() {

    if ($.fn.DataTable.isDataTable('#strategyDataTable table')) {
      var table = $('#strategyDataTable table').DataTable({
        orderCellsTop: true,
        fixedHeader: true,
        stateSave: true,
        retrieve: true,
      });
    } 
    $('#strategyDataTable thead').on('click', 'th', function () {
      let colIndex = $(this).closest("th").index()
      $('input.filter', this).on('keyup change', function () {
        if (table.column(colIndex).search() !== this.value) {
          table
            .column(colIndex)
            .search(this.value)
            .draw();            
        }
      });
    })

  }

Теперь у меня есть 2 строки на странице вэта проблема с данными, если я что-то ищу на первой странице.Он также возвращает результаты со второй страницы также, если ключевое слово соответствует.Я хочу получить результат только со страницы, которую я выбрал, а не с другой страницы.Если ключевое слово соответствует только одной строке из двух, а также соответствует другим строкам страницы.Результат должен показывать только один результат.Не на других страницах результатов.