【问题标题】:handling the table pagination when refreshing remote data programmatically以编程方式刷新远程数据时处理表分页
【发布时间】:2021-06-03 17:27:07
【问题描述】:

我正在尝试将相同的场景 (https://github.com/mbrn/material-table/issues/383) 与我自己的 API 端点一起使用,在我的响应结果中我没有 totalCount 和 page 值。没有它们,我的表格分页显示NaN-NaN of undefined

我可以通过 result.length 处理 totalCount,处理完后我可以看到分页为 NaN-NaN of 38(38 是数组项的计数),但我无法继续到下一页。 这是我的代码:

data={query =>
  new Promise((resolve, reject) => {
    fetch('https://xxxxxxxxxxxxxxxxxx/dev/getcustomerinstructors', {
        method: 'post',
        headers: {
            'Accept': 'application/json',
            'Content-type': 'application/json',
            'Authorization': this.state.id_token
        },
        body: JSON.stringify({
            "refresh_token": this.state.refresh_token,
            "customer_id": this.state.customer_id,
        })
    })
      .then(response => response.json())
      .then(result => {
        console.log(result); //array of objects
        resolve({
          data: result,
          // page: 0, **//how to address this** 
          totalCount: result.length,
        })
      });
  })
}

任何帮助将不胜感激。谢谢

【问题讨论】:

    标签: reactjs material-table


    【解决方案1】:

    回答我自己的问题:

    const page = (query.page + 1); 并在响应后更新页面值page: page - 1 就可以了。

    data={query =>
      new Promise((resolve, reject) => {
        let url = 'https://xxxxxxxxxxxxxxxxxxxxxx/getcustomerinstructors';
        fetch(url, {
            method: 'post',
            headers: {
                'Accept': 'application/json',
                'Content-type': 'application/json',
                'Authorization': this.state.id_token
            },
            body: JSON.stringify({
                "refresh_token": this.state.refresh_token,
                "customer_id": this.state.customer_id,
                "role": this.state.role
            })
        })
        .then(response => response.json())
        .then(result => {
          var res = result.slice(query.page * query.pageSize, (query.page * query.pageSize) + query.pageSize);
          resolve({
            data: res,
            page: query.page,
            totalCount: result.length,
          })
        })
      })
    }
    

    【讨论】:

    • 但是我仍然有一个问题,即使我可以导航到下一页,表格数据也没有更新。
    • 现在表格数据正在更新,编辑上面的代码来解决这个问题。
    猜你喜欢
    • 2014-01-25
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-07-24
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多