PrimeNG为第一个使用延迟加载表设置页面



我正在使用带有"分页器"和"延迟加载"的组件p-table,我用我需要的东西做了一个搜索组件。
当我过滤并且页面索引在另一个页面上时,我正在尝试解决问题。
示例:
页面索引 = 2
筛选文本 = texto。

然后,我更新表上的记录和页数。但是,如果结果具有更多或相等数量的索引页,则页面索引继续使用 2。

我尝试更改事件中的值,但它不适用。

文档 PrimeNG 延迟加载:

loadData(event: LazyLoadEvent) {
//event.first = First row offset
//event.rows = Number of rows per page
//event.sortField = Field name to sort in single sort mode
//event.sortOrder = Sort order as number, 1 for asc and -1 for dec in single sort mode
//multiSortMeta: An array of SortMeta objects used in multiple columns sorting. Each SortMeta has field and order properties.
//filters: Filters object having field as key and filter value, filter matchMode as value
//globalFilter: Value of the global filter if available
this.cars = //do a request to a remote datasource using a service and return the cars that match the lazy load criteria
}

我假设您已经创建了搜索组件,您将在其中进行搜索,这将反映在涡轮增压表中。您没有使用涡轮增压表的全局过滤器。在这种情况下 您必须先重置表,然后获取记录。

假设下面是您的表格:

<p-table #tt [value]="testdata" class="test-data" [lazy]="true"
(onLazyLoad)="loadDataLazily($event)"
[paginator]="true" [rows]="3" [totalRecords]="totalRecords">

使用选择器作为表#tt现在在您的组件.ts文件中

在筛选方法中重置表;

import { Table } from '../../../../node_modules/primeng/components/table/table';
export class TableComponent{
@ViewChild('tt') tt: Table;
filter(){
this.tt.reset();
}
}

最新更新