Поиск данных по всему миру не работает после применения пользовательского фильтра

Question

На самом деле, в моем проекте на всех вкладках я использую таблицы данных, для этого я делаю файл общих данных. js файл. Но в одной из моих вкладок я хочу получить дату начала и дату окончания с помощью пользовательского фильтра, который я успешно применил, переопределив таблицу данных в моем component.ts (с помощью вызова ajax и получения отфильтрованных данных с использованием вызова Ajax) и отображения на столе (# datatable3). Но проблема в том, что (после пользовательской фильтрации данных мой поиск не работает) Я думаю, что в некоторой степени проблема в том, что я сделал, чтобы переопределить таблицу данных.

<div class="datatable-search">
                      <i class="material-icons mr-2 search-icon">search</i>
                      <input class="app-filter" id="global_filter" placeholder="Search in table" type="text" />
                    </div>

                    <div class="row">
                      <div class="col s12">
                        <table class="display" id="datatable3">
                          <thead>
                          <tr>

                            <th>Booking</th>
                            <th>Category</th>
                            <th>User</th>
                            <th>Amount</th>
                            <th>Status</th>
                            <th>Paid at</th>
                            <th></th>
                          </tr>
                          </thead>
                          <tbody *ngIf="paymentuserList?.length > 0">
                            <tr *ngFor="let paymentuser of paymentuserList">

                              <td>{{paymentuser.booking}}</td>
                              <td>{{paymentuser.category_name}}</td>
                              <td>{{paymentuser.user}}</td>
                              <td>{{paymentuser.amount}}</td>
                              <td><span class="m-0 badge green">{{paymentuser.status}}</span></td>
                              <td>{{paymentuser.created_at}}</td>
                              <td></td>
                            </tr>                           
                          </tbody>
                        </table>
                      </div>
                    </div>

А ниже мой компонент Angular .ts код файла

ngOnInit() {
    this.loadAPI = new Promise((resolve) => {
      this.jsList.forEach((url)=>{
        this.assetsLoad.loadScript(url)
       })
      resolve(true);
    });
    this.webService.listPayment().subscribe((response:any)=>{
      if(response.code ==200){
        console.log(response.data);
        this.paymentuserList = response.data
      }

    },error=>{
      swal('Error in Payment list','Something went wrong !!')
    })

    $("#start_date").datepicker({
      format: 'dd/mm/yyyy',
      onSelect: (ndate)=>{
        ndate = new Date(ndate)
        // this.discountUserForm.get('start_from').setValue(ndate.toLocaleDateString())
      }
    })
    $("#end_date").datepicker({
      format: 'dd/mm/yyyy',
      onSelect: (ndate)=>{
        ndate = new Date(ndate)
        // this.discountUserForm.get('start_from').setValue(ndate.toLocaleDateString())
      }
    })

    function fetch_data(is_date_search, start_date='', end_date='')
    {
      console.log(environment.baseUrl);
      $('#datatable3').DataTable({
            'searching': true,
            'paging': true, // Table pagination
            'ordering': true, // Column ordering
            'info': true, // Bottom left status text
            responsive: false,
            dom: 'Bfrtip',
            "ajax": {
                "url": environment.baseUrl +"/api/v1/admin/payments/payment/?is_date_search=" + is_date_search + "&start_date=" + start_date + "&end_date="+ end_date
            },
            "type": "GET",
            "dataType": 'json',
            "contentType": 'application/json; charset=utf-8',
            "columns": [
                { "data": "booking" },
                { "data": "category_name" },
                { "data": "user" },
                { "data": "amount" },
                { "data": "status" },
                { "data": "created_at" }             
            ],
        });
    }
    // var iterItem=0


    $('#search').click(function(){
      var start_date = $('#start_date').val();
      var end_date = $('#end_date').val();
      console.log(start_date);
      console.log(end_date);
      if (start_date != '' && end_date != '')
      {
        $('#datatable3').DataTable().clear().destroy();
        fetch_data("yes", start_date, end_date);
      }
      else
      {
        swal('Date Error', 'Please select both date','info')
      }
    });
  }

и одна вещь, которую у меня есть общая таблица данных. js, которую я использую как общую для всех таблиц данных вкладок в моем проекте. Это проблема переопределения? Что происходит, когда я нажимаю на поле поиска. После пользовательских данных фильтра мои данные фильтра просто удаляются из HTML, и только в это время происходит пагинация. ЛЮБАЯ ПОМОЩЬ БУДЕТ ОЦЕНЕНА

1. Результат Изображение, которое идет после данных фильтра

2. После нажатия на поиск Кнопка

3. И последнее и последнее, что я не получаю никаких ошибок в консоли, все понятно, так как я много пробовал, применяя поиск true, или ltrip et c но ничего не работает