PrimeNG将页面设置为第一个使用延迟加载表 [英] PrimeNG set the page for the first using lazy loading table

问题描述

我将组件p-table与"Paginator"和延迟加载"一起使用，并且根据需要制作了一个搜索组件.
我正在尝试解决过滤器并且页面索引位于另一页时的问题.
例如:
页面索引= 2
过滤文字= texto.

I'm using component p-table with "Paginator" and "Lazy loading", and I made one search component with what I need.
I am trying to fix the problem when I filter and the page index is on another page.
example:
page index = 2
Filtering text = texto.

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

Then, I update the records on table and the quantity of pages. But the page index continues with 2, if the result has more or equal quantity of index pages.

我尝试更改事件"中的值，但不适用.

I've try changing the value from Event but it does not apply.

文档PrimeNG延迟加载:

Documentation PrimeNG lazy loading:

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
}

推荐答案

我假设您已经创建了要在其中搜索的搜索组件，并且该组件将反映在turbo表中.您没有使用Turbotable的全局过滤器.在这种情况下 您必须先重置表，然后再获取记录.

I am assuming you have created your search component where you will search and that will reflect in the turbo table. You are not using Global filter of Turbotable. In this case you have to reset the table first and then fetch the record.

假设下面是您的表格:

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

为表使用选择器，例如 #tt 现在在您的 component.ts 文件

Use selector for your table like #tt Now in you component.ts file

使用过滤器方法重置表格；

reset your table in your filter method;

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

这篇关于PrimeNG将页面设置为第一个使用延迟加载表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！