Я пытаюсь применить поле ввода фильтра поиска для всех разбивок на страницы, но если я пометил фильтр, он принимает только элементы страницы, а не элементы целого массива.
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
};
}
}
- Как отправить полный массив в поисковый фильтр!
- В настоящее время отправляется только 20 элементов в поисковый фильтр, поэтому я хочу, чтобы он отправлял все данные araay и фильтрация данных в нумерацию страниц