即使在添加 X-Total-Count 之后，分页和排序也无法在 react-admin 中正常工作

Posted 2023-03-27

【中文标题】即使在添加 X-Total-Count 之后，分页和排序也无法在 react-admin 中正常工作

【英文标题】：Pagination & sorting not working in react-admin as expected even after adding X-Total-Count

【发布时间】：2019-09-26 10:26:37

【问题描述】：

这是我第一次使用 react-admin。我已经完成了文档中的教程设置。当我为我的 API 实现相同的设置时，问题就开始了。

我有一个使用 expressJS 设置的 Web API 路由，用于从 mysql 数据库中获取数据。较早的错误是在 HTTP 响应标头中包含 X-Total-Count，以便在 React-Admin 上工作的分页。

我在 HTTP 响应标头中添加了 X-Total-Count，并且数据已成功从 Web API 获取到 react-admin 界面。但是，分页仍然无法按预期工作。

下面的 sn-ps 可能会有所帮助。

在 App.js 中

  <Admin dataProvider=jsonServerProvider("/api/fetch/")>
    <Resource
      name="temp"
      list=UserList
      edit=UserEdit
      create=CreateUser
    />
  </Admin>

fetch.js 中的 Web express API

route.get('/temp', (req, res) => 
  sql.query(`SELECT * FROM temp`, (err, result) => 
    if (err) 
        return res.status(400).send(`Invalid Request: $err`)
    

    res.setHeader('X-Total-Count', result.length)

    return res.status(200).send(result)
  )
)

在 server.js 中

app.use(cors());   // using cors

react-admin 在一个表格中显示从 Web API 获取的所有数据，没有分页和排序功能，这不是我想要的。如您所见，分页设置为每个表显示 10 条记录，并在分页时拆分剩余记录，而在我的情况下，所有数据都显示在单个表上，分页菜单无效。

同样，基于列的表格排序也不能正常工作

【问题讨论】：

谢谢@halfer。我现在已经放弃了 react-admin 并使用引导程序构建管理仪表板。所以我不再急于回答这个具体问题。我会记住不要继续前进。

【参考方案1】：

当您有分页时，或者默认情况下<List>React-Admin 通过向后端发送查询字符串以将响应限制为一定数量来批量获取记录。然后将响应呈现在前端。从我可以看到您的后端独立于请求查询字符串返回表中的所有记录。如果您说将响应限制为 10 条记录，或者如果您不这样做，它将始终返回表上的所有记录，因此它将在前端显示所有记录。

您也可以看到您没有排序，因为在问题图像中您有大学名称按升序排序，但记录显示按 id 排序。