Угловая функция для поиска на другой странице

Question

Я работаю над пользовательским интерфейсом для приложений со списком пользователей, мой бэкэнд был разработан, и я пытаюсь реализовать функции для внешнего интерфейса, но я немного сложен. Ранее я успешно реализовал разбиение на страницы, чтобы разделить список пользователей на 10 пользователей на страницу.

Я хочу реализовать функцию поиска на каждой указанной мной странице.

Условие, которое в данный момент находится в поле поиска, успешно отображает результаты фильтра, но, к сожалению, только 1 страница и другие страницы, которые пользователь не вызывает.

Я использую Angular 7, но пока мне не повезло. Помощь будет удивительной

import { Component, OnInit } from '@angular/core';
import { ApiService } from '@service/api.service';
import { ToasterService } from '@common/toaster/toaster.service';
import * as AppConfig from '../../../environments/AppConfig';
import { Helper } from '@common/helper';
import { ActivatedRoute } from '@angular/router';

@Component({
    selector: 'app-user',
    templateUrl: './user.component.html',
    styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {

    public users: any = [];
    public sortBy: 'desc';
    public sortOrder: 'asc';
    public appConfig: any;
    public filterQuery: string;
    public userType: string;
    public referral: boolean = false;
    public originalData: any = [];
    public Regular: any = [];
    public titleuser:string;


    constructor(private apiService: ApiService,
        private toasterService: ToasterService,
        public helper: Helper,
        public router: ActivatedRoute
    ) {
        this.appConfig = AppConfig;
    }

    ngOnInit() {
        this.router.queryParams.subscribe(params => {   
            if (params.userType == 'Influencer') {
                this.referral = true;
            } else {
                this.referral = false;
            }

            if (params.userType) {
                this.userType = params.userType;
                this.apiService.setStorage('userListType', this.userType);
            } else {
                this.userType = this.apiService.getStorage('userListType') ? this.apiService.getStorage('userListType') : 'Regular';
            }

            this.onFilterData();
            this.onLoadGetData(params.userType);
        });
    }

    onLoadGetData(paramUser) {
        let api = '';
        if (paramUser == 'Influencer') {
            this.titleuser = "INFLUENCER"
            api = this.apiService.influencer;
        } else if (paramUser == 'Regular') {
            this.titleuser = "REGULAR"
            api = this.apiService.reguler;
        } else {
            api = this.apiService.candidate;
            this.titleuser = "CANDIDATE"
        }

        this.apiService.postCall(api, {
            // 'startFrom': ''
            // 'limit': 10,
        }, (response) => {
            console.log('cek data',response)
            if (response.status === true) {
                this.originalData = response.data;
                this.onFilterData();
            }
        });
    }

    onClickStatus(id, status) {
        this.apiService.getCall(this.apiService.updateStatus + '/' + id + '/' + status, (response) => {
            if (response.status && response.code === 200) {
                this.onLoadGetData(this.userType);
                this.toasterService.success(response.message);
            }
        });
    }

    onClickDelete(id) {
        if (!confirm('Are you sure?')) {
            return;
        }
        this.apiService.getCall(this.apiService.deleteUser + '/' + id, (response) => {
            if (response.status && response.code === 200) {
                this.onLoadGetData(this.userType);
                this.toasterService.success(response.message);
            }
        });
    }


    onFilterData() {
        this.users = this.originalData.filter(user => {
            if (this.userType !== 'INFLUENCER') {
                return user.userType === this.userType.toUpperCase() || !user.userType;
            }
            return user.userType === this.userType.toUpperCase();
        });
    }

    searchFunction() {
        let input, filter, table, tr, td, i, txtValue;
        input = document.getElementById('search');
        filter = input.value.toUpperCase();
        table = document.getElementById('DataTable');
        tr = table.getElementsByTagName('tr');

        for (i = 0; i < tr.length; i++) {
            td = tr[i].getElementsByTagName('td')[0];
            if (td) {
                txtValue = td.textContent || td.innerText;
                if (txtValue.toUpperCase().indexOf(filter) > -1) {
                    tr[i].style.display = '';
                    tr[1].style.display = 'none';
                } else {
                    tr[i].style.display = 'none';
                }
            } else {
                tr[1].style.display = 'block';
            }
        }
    }
}

.list-logo {
    max-width: 50px;
    max-height: 50px;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    margin-right: 5px;
}
.resultnotfound {
    display: none;
    margin-left: 5%;
}

<!-- BEGIN .main-content -->
<div class="main-content">
  <div class="page-title"><i class="icon-custom-left" style="line-height: 40px;" routerLink="/dashboard"></i>
    <h3 style="line-height: 45px;"><span class="bold">
        User </span><span class="semi-bold">Management</span></h3>
  </div>
  <!-- Row start -->
  <div class="row-fluid">
    <div class="span12">
      <div class="grid simple">
        <div class="grid-body">
          <div class="grid-header">
            <!-- <div class="">
                            <div class="col-sm-4" style="float: left">
                                <div class="daterange-container">
                                    <a data-toggle="tooltip" class="btn btn-dark btn-sm btn-create"
                                        routerLink="/user/create"><i class="material-icons" style="vertical-align: middle;">add_circle</i> Add New User </a>
                                </div>
                            </div>
                        </div> -->
            <div class="">
              <h5 class="col-sm-4 no-padding"><b>{{ titleuser | uppercase }}</b></h5>
              <div class="col-sm-4 no-padding" style="float: right">
                <div class="input-group transparent">
                  <span class="input-group-addon">
                    <i class="fa fa-search"></i>
                  </span>
                  <input #box id="search" type="text" class="form-control" placeholder="Search" (keyup)="searchFunction()">
                </div>
              </div>
            </div>
          </div>
          <table class="table table-hover tab " id="DataTable" [mfData]="users" #mf="mfDataTable"
            [mfRowsOnPage]="10" [(mfSortBy)]="sortBy" [(mfSortOrder)]="sortBy">
            <thead>
              <tr>
                <!-- <th class="v-align-middle" style="width:5%">
                                    <mfDefaultSorter by="id">Sr No</mfDefaultSorter>
                                </th> -->
                <th class="v-align-middle" style="width:15%" data-hide="phone,tablet">
                  <mfDefaultSorter by="name">Name</mfDefaultSorter>
                </th>
                <th class="v-align-middle" style="width:10%">
                  <mfDefaultSorter by="userType">User Type</mfDefaultSorter>
                </th>
                <th class="v-align-middle" mfDefaultSorter by="status" style="width:10%" data-hide="phone,tablet">
                  <mfDefaultSorter by="status">Status</mfDefaultSorter>
                </th>
                <th class="v-align-middle" style="width:15%" data-hide="phone,tablet">
                  <mfDefaultSorter by="paymentStatus">Payment Status</mfDefaultSorter>
                </th>
                <th class="v-align-middle" style="width:12%" data-hide="phone,tablet">
                  <mfDefaultSorter by="createdAt">Date of Join</mfDefaultSorter>
                </th>
                <th class="v-align-middle" style="width:12%" data-hide="phone,tablet" *ngIf="referral">
                  <mfDefaultSorter by="referralCode">Referral Code</mfDefaultSorter>
                </th>
                <th class="v-align-middle" style="color: #369; width:10%;" data-hide="phone,tablet"> Action
                </th>
              </tr>
            </thead>
            <tbody>
              <tr class="v-align-middle resultnotfound">
                <span class="muted">
                  <h5><span class="bold">Sorry User Not Found!</span></h5>
                </span>
              </tr>
              <tr *ngFor="let user of mf.data; let i = index">
                <!-- <td class="v-align-middle">{{ i + 1 }}</td> -->
                <td class="v-align-middle"><span class="muted">
                    <img src="{{ helper.getUserImageListUrl(appConfig, user) }}" class="list-logo">
                    {{ user.name | titlecase }}</span></td>
                <td class="v-align-middle"><span class="muted">{{ user.userType }}</span></td>
                <td class="v-align-middle"><span class="muted">{{ user.status }}</span></td>
                <td class="v-align-middle"><span class="muted">{{ user.paymentStatus ? 'Paid' : 'Unpaid'}}</span></td>
                <td class="v-align-middle"><span class="muted" *ngIf="user.createdAt && user.createdAt != '0000-00-00'">{{
                    user.createdAt | date: 'dd MMM yyyy' }}</span>
                </td>
                <td class="v-align-middle" *ngIf="referral"><span class="muted">{{ user.totalReferredUser }}</span></td>
                <td class="v-align-middle"><a class="muted" data-toggle="tooltip" [routerLink]="['/user/' + user.id + '/detail']"><i
                      class="material-icons">border_color</i>
                  </a></td>
                <!-- <td class="v-align-middle">
                                    <div class="progress ">
                                        <div data-percentage="80%"
                                            class="progress-bar progress-bar-success animate-progress-bar"></div>
                                    </div>
                                </td> -->
              </tr>
              <tr *ngIf="!users || users.length != 0">
                <td colspan="4" align="center"> No data found. </td>
              </tr>
            </tbody>
            <tfoot>
              <tr>
                <td colspan="7">
                  <mfBootstrapPaginator [rowsOnPageSet]="[50,100,250]"></mfBootstrapPaginator>
                </td>
              </tr>
            </tfoot>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- END: .main-content -->

Условие, которое в данный момент находится в поле поиска, успешно отображает результаты фильтра, но, к сожалению, только 1 страница и другие страницы, которые пользователь не вызывает.