Angular 8中如何保存angular2-datatable的分页、排序、搜索状态

angular2-datatable未内置stateSave自动保存能力，可通过手动缓存分页、排序、搜索参数实现状态保留，具体实现步骤如下：

1. 定义状态结构与存储标识 #

使用sessionStorage/localStorage做状态存储，先定义状态结构和唯一存储key：

// 存储key，可根据业务场景自定义
const LIST_TABLE_STATE_KEY = 'user-list-table-state';

// 表格状态结构
interface TableState {
  page: number; // 当前页码
  itemsPerPage: number; // 每页展示条数
  sortBy: string; // 排序字段
  sortOrder: 'asc' | 'desc'; // 排序方向
  searchKeyword: string; // 搜索关键词
}

2. 监听状态变化实时缓存 #

给表格和搜索控件绑定事件，每次状态变更时更新缓存：
模板示例代码：

<!-- 搜索框 -->
<input 
  type="text" 
  [(ngModel)]="tableState.searchKeyword" 
  (input)="saveTableState()"
  placeholder="输入关键词搜索"
>

<!-- 数据表格 -->
<data-table
  [items]="tableData"
  [itemsPerPage]="tableState.itemsPerPage"
  [activePage]="tableState.page"
  [sortBy]="tableState.sortBy"
  [sortOrder]="tableState.sortOrder"
  (pageChange)="saveTableState()"
  (sortChange)="saveTableState()"
>
  <!-- 表格列定义示例 -->
  <data-table-column [property]="'username'" [header]="'用户名'"></data-table-column>
  <data-table-column [property]="'createTime'" [header]="'创建时间'"></data-table-column>
</data-table>

组件中对应的保存方法：

// 表格状态变量
tableState: TableState;

// 保存状态到缓存
saveTableState() {
  sessionStorage.setItem(LIST_TABLE_STATE_KEY, JSON.stringify(this.tableState));
  // 状态变更后触发数据查询逻辑
  this.loadTableData();
}

3. 组件初始化回填缓存状态 #

组件初始化时优先读取缓存的状态，没有缓存则使用默认值：

ngOnInit() {
  const cachedState = sessionStorage.getItem(LIST_TABLE_STATE_KEY);
  if (cachedState) {
    // 有缓存直接回填
    this.tableState = JSON.parse(cachedState) as TableState;
  } else {
    // 无缓存使用默认配置
    this.tableState = {
      page: 1,
      itemsPerPage: 10,
      sortBy: 'createTime',
      sortOrder: 'desc',
      searchKeyword: ''
    }
  }
  // 加载表格数据
  this.loadTableData();
}

可选优化配置 #

• 如果需要离开列表页就清空状态，可在ngOnDestroy钩子中删除缓存：sessionStorage.removeItem(LIST_TABLE_STATE_KEY);
• 如果项目存在多个同类型表格，可给存储key拼接页面路由、用户id等前缀，避免不同页面的状态冲突。

内容的提问来源于stack exchange，提问作者kirk limbu