Question

使用ngx-datatable中的Angular组件Swilane，可以使用server-side paging和server-side sorting。

两者都有记录，但是不清楚如何将它们组合在一起并同时使用服务器端分页+排序。

从文档中，当用户更改页面时，分页会自动调用回调：

setPage(pageInfo) {
    this.page.pageNumber = pageInfo.offset;
    this.serverResultsService.getResults(this.page).subscribe(pagedData => {
    this.page = pagedData.page;
    this.rows = pagedData.data;
 });

并且排序也是如此：

onSort(event) {
    // event was triggered, start sort sequence
    console.log('Sort Event', event);
    this.loading = true;
    // emulate a server request with a timeout
    setTimeout(() => {
      const rows = [...this.rows];
      // this is only for demo purposes, normally
      // your server would return the result for
      // you and you would just set the rows prop
      const sort = event.sorts[0];
      rows.sort((a, b) => {
        return a[sort.prop].localeCompare(b[sort.prop]) * (sort.dir === 'desc' ? -1 : 1);
      });

      this.rows = rows;
      this.loading = false;
    }, 1000);
  }

但如何将它们结合起来？

Answer 1

我发现处理服务器端分页和服务器端排序的最佳方法包括：

有一个page对象，其中包含将绑定到表格的所有分页和排序信息（如订单栏，订单方向，页码，页面大小......）
使用单个函数reloadTable()调用API以使用page对象中存储的数据作为参数获取数据，自动重新呈现表
拥有pageCallback 仅相对于分页更新page中包含的数据，然后调用{{1} }
拥有reloadTable() 仅相对于排序更新sortCallback中包含的数据，然后调用{{1} }

示例：

page

如何使用ngx-datatable

1 个答案: