将页面选择设置为PrimeNG p表的最后一页

Question

我需要将p-table的选定页面作为最后一页。

我能够获取我的表对象：

@ViewChild('myTable') myTable: DataTable;
ngOnInit() {
this.subService.subsUpdated.subscribe(result => {
this.fetchSubcontracts();
});
this.appForm.subAdded.subscribe(result => {
this.added = 4;
this.fetchSubs();
});
}

我尝试将p-table上的[first]和[paginatorPosition]属性绑定到属性，但这不起作用。

<p-table #myTable
[value]="subs"
sortMode="multiple"
selectionMode="single"
(onRowSelect)="onRowSelect($event)"
(onRowUnselect)="onRowUnselect($event)"
[(selection)]="selectedSub"
[columns]="columns"
dataKey="id"
[paginator]="subs.length > 0"
[rows]="5"
[first]="added"
>

Answer 1

这对我有用：

@ViewChild('dt', { static: false }) table: Table;
this.table.first = Math.floor(this.table.totalRecords / this.table.rows) * this.table.rows;
this.table.firstChange.emit(this.table.first);
this.table.onLazyLoad.emit(this.table.createLazyLoadMetadata());

Answer 2

first属性是要显示的第一行的索引，而不是要显示的第一页的索引。

在表格属性中，您设置了每页 5 行，因此如果添加等于 4，您将始终停留在包含第 4 行的第一页上。

所以添加的内容应该是Math.floor(this.subs.length/5)

Answer 3

尝试使用onPageChange()函数：

this.appForm.subAdded.subscribe(result => {
// number of pages in the table
const pageCount = Math.ceil(this.myTable.totalRecords / this.myTable.rows);
// last page
const page = pageCount - 1;
this.myTable.onPageChange({
pageCount,
page,
first: page * this.myTable.rows,
rows: this.myTable.rows
});
this.fetchSubs();
});

而不是

this.myTable.totalRecords

您也可以使用

this.subs.length

您还可以从 HTML 中删除[first]="added"

Answer 4

在p表上设置"first"是臭名昭著的。它不会一直有效。我发现，当你以丑陋的方式做这件事时，它会起作用！这样：

@ViewChild('table', { static: true }) table!: Table;
goToPage(page: number): void {
setTimeout(() => {
this.table.first = (page - 1) * this.pageSize;
this.table.firstChange.emit(this.table.first);
}, 0);
}