MUI 数据表服务器端渲染答案

【问题标题】：MUI Datatables Server Side RenderingMUI 数据表服务器端渲染
【发布时间】：2019-01-25 01:42:25
【问题描述】：

MUI 数据表有这样的功能：

onChangePage

当页面改变时触发的回调函数。函数（当前页面：数字）=> 无效

我有一个这样的分页 API

users?limit=10&start=0&search=

如何在 mui-datatables 中为 react js 进行分页的服务器端渲染？

【问题讨论】：

标签： javascript reactjs datatable server-side mui-datatable

【解决方案1】：

您可以像这样将表格连接到 API（来自官方示例）：

import React from "react";
import ReactDOM from "react-dom";
import MUIDataTable from "mui-datatables";

class App extends React.Component {
  state = {
    page: 0,
    count: 100,
    data: []
  };

  componentDidMount() {
    this.getData();
  }

  // get data
  getData = () => {
    this.xhrRequest().then(data => {
      this.setState({ data });
    });
  };

  // mock async function
  xhrRequest = () => {
    return new Promise((resolve, reject) => {
      const srcData = [
        ["Gabby George", "Business Analyst", "Minneapolis"],
        ["Aiden Lloyd", "Business Consultant", "Dallas"],
        ["Jaden Collins", "Attorney", "Santa Ana"],
        ["Franky Rees", "Business Analyst", "St. Petersburg"],
        ["Aaren Rose", "Business Analyst", "Toledo"]
      ];

      const maxRound = Math.floor(Math.random() * 2) + 1;
      const data = [...Array(maxRound)].reduce(
        acc => acc.push(...srcData) && acc,
        []
      );
      data.sort((a, b) => 0.5 - Math.random());

      setTimeout(() => {
        resolve(data);
      }, 250);
    });
  };

  changePage = page => {
    this.xhrRequest(`/myApiServer?page=${page}`).then(data => {
      this.setState({
        page: page,
        data
      });
    });
  };

  render() {
    const columns = ["Name", "Title", "Location"];
    const { data, page, count } = this.state;

    const options = {
      filter: true,
      filterType: "dropdown",
      responsive: "stacked",
      serverSide: true,
      count: count,
      page: page,
      onTableChange: (action, tableState) => {
        console.log(action, tableState);
        // a developer could react to change on an action basis or
        // examine the state as a whole and do whatever they want

        switch (action) {
          case "changePage":
            this.changePage(tableState.page);
            break;
        }
      }
    };

    return (
      <MUIDataTable
        title={"ACME Employee list"}
        data={data}
        columns={columns}
        options={options}
      />
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

您可以使用 API 的正确结构重写 getData 和 changePage 方法。我更喜欢 Axios HTTP 客户端进行这种通信。

另外我将此示例添加为working demo。

【讨论】：