Результат поиска появляется на отдельных страницах при поиске в ANGULAR - PullRequest
1 голос
/ 29 апреля 2020

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

 Filteringpipe.ts

import {
  PipeTransform,
  Pipe
} from "@angular/core";

@pipe({
  name: 'SearchText'

})
export class SearchTablePipe implements PipeTransform {
  transform(items: any[], filter: any): any {
    if (!filter || !items) return items;
    let filterKeys = Object.keys(filter);
    return items.filter(item => {
      return filterKeys.some((keyName) => {
        return new RegExp(filter[keyName], 'gi').test(item[keyName]) || filter[keyName] == "";
      });
    });
  }
}

Html code for the problem there is input element and a table 
list.component.html

<input type="search" class="form-control input-sm" formControlName="searchText" placeholder="Search">
</label>
</div>
</form>
</div>
</div>
</div>
<div class="box-body table-responsive">
  <table class="table table-hover">
    <tbody>
      <tr>
        <th class="pointer">roll No.</th>
        <th class="pointer">Serial Number</th>
        <th class="pointer"> Description</th>
        <th class="pointer">age</th>
        <th class="pointer">Date</th>
      </tr>
      <tr *ngFor="let defect of pagedItems | SearchText:{name:searchFormSmall.get('searchText').value">
        <td><a data-toggle="modal"> {{ rollNo }} </a></td>
        <td> {{ Name }} </td>
        <td> {{ serialNumber }} </td>
        <td> {{description }} </td>
        <td> {{age}} </td>
        <td> {{date }} </td>
      </tr>
    </tbody>
  </table>
  <div class="row pull-right" style="margin-right:5px">
    <ul *ngIf="pager.pages && pager.pages.length" class="pagination">
      <li [ngClass]="{disabled:pager.currentPage === 1}">
        <a (click)="setPage(1)"> {{ 'PAGINATION.FRIST' | translate }} </a>
      </li>
      <li [ngClass]="{disabled:pager.currentPage === 1}">
        <a (click)="setPage(pager.currentPage - 1)"> {{ 'PAGINATION.PREVIOUS' | translate }} </a>
      </li>
      <li *ngFor="let page of pager.pages" [ngClass]="{active:pager.currentPage === page}">
        <a (click)="setPage(page)">{{page}}</a>
      </li>
      <li [ngClass]="{disabled:pager.currentPage === pager.totalPages}">
        <a (click)="setPage(pager.currentPage + 1)"> {{ 'PAGINATION.NEXT' | translate }} </a>
      </li>
      <li [ngClass]="{disabled:pager.currentPage === pager.totalPages}">
        <a (click)="setPage(pager.totalPages)"> {{ 'PAGINATION.LAST' | translate }} </a>
      </li>
    </ul>
  </div>
</div>
</div>

Component.ts
------------------------------------------------------------------

getItems() {
    this.ipvService.getDefects(this.authUserService.getUserPhone(), this.searchForm.getRawValue())
      .subscribe((Lists) => {
        this.Lists = Lists;
        this.setPage(1);
      }, (error) => { });
  }


  private setPage(page: number) {
    this.pager = this.paginationService.getPager(this.defects.length, page);
    this.pagedItems = this.defects.slice(this.pager.startIndex, this.pager.endIndex + 1);
  }
  
  
  Pagination.service.ts
 --------------------------------------------------------

@Injectable({ providedIn: 'root' })
export class PaginationService {

  constructor() { }

  getPager(totalItems: number, currentPage: number = 1, pageSize: number = 20) {
    let totalPages = Math.ceil(totalItems / pageSize);

    if (currentPage < 1) {
      currentPage = 1;
    } else if (currentPage > totalPages) {
      currentPage = totalPages;
    }

    let startPage: number, endPage: number;
    if (totalPages <= 10) {
      startPage = 1;
      endPage = totalPages;
    } else {
      if (currentPage <= 6) {
        startPage = 1;
        endPage = 10;
      } else if (currentPage + 4 >= totalPages) {
        startPage = totalPages - 9;
        endPage = totalPages;
      } else {
        startPage = currentPage - 5;
        endPage = currentPage + 4;
      }
    }

    let startIndex = (currentPage - 1) * pageSize;
    let endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1);

    let pages = Array.from(Array((endPage + 1) - startPage).keys()).map(i => startPage + i);

    return {
      totalItems: totalItems,
      currentPage: currentPage,
      pageSize: pageSize,
      totalPages: totalPages,
      startPage: startPage,
      endPage: endPage,
      startIndex: startIndex,
      endIndex: endIndex,
      pages: pages
    };
  }
}
  1. Как отправить полный массив в поисковый фильтр!
  2. В настоящее время отправляется только 20 элементов в поисковый фильтр, поэтому я хочу, чтобы он отправлял все данные araay и фильтрация данных в нумерацию страниц
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...