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的响应才能使其运行,并且分页继续工作会是什么样子?还是必须在客户端进行调整?
非常感谢。