如何在 Angular 8 中保存表格的分页、排序、搜索状态？我正在使用 angular2-datatable

Posted 2023-05-09

【中文标题】如何在 Angular 8 中保存表格的分页、排序、搜索状态？我正在使用 angular2-datatable

【英文标题】：How can i save pagination, sort, search state of a table in Angular 8? I am using angular2-datatable

【发布时间】：2021-10-23 12:53:41

【问题描述】：

我有一个显示项目列表的表格。我单击了第 3 页中的一个项目并导航到该项目的详细信息页面。现在，当我导航回表格页面时，在详细信息页面中完成任务后，我想进入同一页面 3。 当前行为：它导航到第 1 页。 阅读数据表的文档，我发现了一个保存状态的属性 stateSave。我如何在 angular2-datatable 中实现它？ 我正在使用 angular2-datatable 来显示表格中的项目。

【参考方案1】：

我认为有很多方法可以解决这个问题。

如果您有状态管理系统，您可以将当前页面保存在状态中 您可以在路由器中包含页码。

我更喜欢路由器方式，因为每当刷新 URL 或复制粘贴到另一个浏览器时，它都会呈现准确的页面。

const route: Route = [
  
    path: 'table/:pageNumber',
    component: TableComponent,
  ,
  
    path: 'table/:pageNumber/item',
    component: ItemComponent,
  
];

使用this.router.navigate(['table', 1]); 初始加载表

在 TableComponent 中使用下面的代码来获取ngOnInit 上的页码

class TableComponent implements ngOnInit() 
  activePage!: number;

  constructor(private activatedRoute: ActivatedRoute, private router: Router) 

  ngOnInit() 
    this.activePage = this.activatedRoute.snapshot.params.pageNumber || 1;
  
  
  onRowClick() 
   this.router.navigate(['table', this.activePage, 'item'])
  

<table ...
[mfActivePage]="activePage" (mfOnPageChange)="onPageChange($event)>
</table>

这就是整个想法，路由器配置和路由 url 可能会根据您的应用程序而有所不同。请试试这个。

【讨论】：

你能在 stakbliz 上做一个演示吗？我有点困惑，因为我是 Angular 新手……非常感谢您的帮助

告诉我你的疑问。我也许能帮上忙。

非常感谢@JsNgian 帮了大忙。我做了一个小修改。我在分页器上添加了一个点击事件，分页器工作正常。

。现在我想动态添加 [mfRowsOnPage]="10" 它的值。你能再指导我一次吗...谢谢

(mfOnPageChange)="onPageChange($event)" 此活动将为您提供rowsOnPage 和rowsOnPage。使用[mfRowsOnPage]="rowsOnPage"（在ts 中创建一个rowsOnPage 变量）和onPageChange(event) this.rowsOnPage = event.rowsOnPage; this.activePage = event.activePage 内部我猜这会起作用。如果您认为这是正确的答案，请接受它作为答案。

我遇到了问题。如果我更改 RowsOnPage 值（例如，最初是 10 行，然后我在页面上更改为 50 行）并查看第 5 页中一项的详细信息。返回列表页面后，所有分页（activePage）值重置为1.我希望它将其 rowOnPage 保留为先前的值 50 和 page 5 。我在控制台上打印，RowsOnPage 和 activePage 正确显示了我存储在服务中的 50 和 5，但是活动页面显示 1，有时 2 不正确的活动页面 5。你能帮我修复它吗......提前谢谢