Question

我正在使用带有分页的过滤器。它工作正常，但问题是，当我搜索“名称”时，它会过滤结果，但分页保持不变，就像搜索结果返回3个过滤器记录一样，分页剧照显示页面，用户可以浏览这些页面。我想使用搜索过滤器更改分页号。这是我的示例代码

    <input type="text" placeholder="User Name" name="username" [(ngModel)]="_userListParams.UserName" class="form-control">

<pagination-controls (pageChange)="pageChanged($event)" (pageChange)="Paging.currentPage = $event"></pagination-controls>

      <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th *ngFor="let cell of tableData2.headerRow">{{ cell }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr [routerLink]="['/UserDetails', row.Id]" *ngFor="let row of tableData2.dataRows | filter: 'Name':  _userListParams.UserName | paginate: { itemsPerPage: Paging.pageSize, currentPage: Paging.currentPage,totalItems: Paging.totalCount} ;let i = index;">
                                    <td>{{i+1}}</td>
                                    <td>{{row.Name}}</td>
                                    <td>{{row.TypeName}}</td>
                                    <td>{{row.Country}}</td>
                                    <td>{{row.Status}}</td>
                                    <td>{{row.ItemsQty}}</td>
                                    <td><img class="panel-profile-img" height="70" width="70" src="{{imgurl+row.ProfilePic}}" alt=""></td>
                                </tr>
                                <tr *ngIf="tableData2.dataRows.length == 0">
                                    <td colspan="7" class="text-center text-danger">No Record Found!</td>
                                </tr>
                            </tbody>
                        </table>

这是我正在使用的烟斗

@Pipe({ name: "filter" })
export class FilterPipe implements PipeTransform {
    transform(items: any[],field: string, searchText: string): any[] {
      if(!items) return [];
      if(!searchText) return items;
      searchText = searchText.toLowerCase();
       return items.filter( it => {
           debugger;
        return it[field].toLowerCase().includes(searchText);
      });
     }
  }

附加的图像

Answer 1

请尝试在private static object IsEnabledCoerceValueCallback(DependencyObject d, object value) { if (!(bool)value) { return false; } return ((HamburgerMenuItem)d).CanExecute; }元素上设置autoHide选项，如果所有结果都适合第1页，则强制其消失。

链接到相关部分的文档：https://www.npmjs.com/package/ngx-pagination#api

已编辑，删除了我删除<pagination-controls>选项的建议。缺少标题中您所说的“服务器分页”部分。 Facepalm。

服务器分页时使用的4号角过滤器管

1 个答案: