React Material-UI排序整个响应而不只是分页响应

currently I am using the "Sorting & Selecting" table of Material-UI.

由于分页,整个东西都连接到了我的api,因此不是一次加载所有数据,而是一次加载“页面”的数据,而我在响应中得到该数据。如果单击“下一页”,则将加载下一页的更多数据。

整个过程运行完美。但是现在问题来了:

由于我不会一次加载所有数据,因此表中的排序功能仅应用于响应中“页面”上的数据。但是,我希望Material UI的sort函数能够对所有数据进行排序,而不只是对已加载的数据进行排序。

我的api的定期分页响应:

{
    "users": [
        {
            "id": 1,
            "name": "John Doe"
        },
        {
            "id": 2,
            "name": "Pete Flow"
        }
    ],
    "total": 100,
    "page": 0,
    "size": 20
}

Material-UI排序:

function descendingComparator(a, b, orderBy) {
  if (b[orderBy] < a[orderBy]) {
    return -1;
  }
  if (b[orderBy] > a[orderBy]) {
    return 1;
  }
  return 0;
}

function getComparator(order, orderBy) {
  return order === 'desc'
    ? (a, b) => descendingComparator(a, b, orderBy)
    : (a, b) => -descendingComparator(a, b, orderBy);
}

function stableSort(array, comparator) {
  const stabilizedThis = array.map((el, index) => [el, index]);
  stabilizedThis.sort((a, b) => {
    const order = comparator(a[0], b[0]);
    if (order !== 0) return order;
    return a[1] - b[1];
  });
  return stabilizedThis.map((el) => el[0]);
}

我是否需要调整api的响应才能使其运行,并且分页继续工作会是什么样子?还是必须在客户端进行调整?

非常感谢。

评论