Html component
<input type="text" class="form-control" placeholder="Search" (change)="searchText($event)"/>
<li *ngFor="let list of this.lists | paginate: { itemsPerPage: count, currentPage: p,totalItems:4 } index as i"><a href="javascript:void(0)"> # {{ i+count * (p - 1) + 1 }} List </a></li>
.ts file
searchText(text_string:any)
{
this.lists = this.lists.filter(item => item.id === text_string.target.value);
}
I want to display only those items where id matches this id {{ i+count * (p - 1) + 1 }}
Any solution to implement search in the existing paging
First you need two variables: "listFiltered" and "list", else you loose "this.list" (if you change the search you filter over the list filtered), so
searchText(text_string:any)
{
if (!text_string)
this.listFiltered=this.lists
else
this.listsFiltered = this.lists.filter(
item => item.id === text_string.target.value);
}
To paginate, generall you has two variables: pageIndex (from 0 to...) and pageSize (the number of elements). So you can use slice pipe
<li *ngFor="let list of listsFiltered |
slice:pageIndex*pageSize:(pageIndex+1)*pageSize">
...
</li>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.