Javascript MUI数据表服务器端呈现

MUI数据表具有如下功能：

onChangePage

当页面更改时触发的回调函数。函数（当前页：编号）=>void

我有一个用于分页的API，如下所示

用户？限制=10&开始=0&搜索=

---

如何在react js的mui datatables中为分页进行服务器端呈现？

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

从“React”导入React；
从“react dom”导入react dom；
从“mui数据表”导入MUIDataTable；
类应用程序扩展了React.Component{
状态={
页码：0，
计数：100，
数据：[]
};
componentDidMount（）{
这是getData（）；
}
//获取数据
getData=（）=>{
this.xhrequest（）.then（数据=>{
this.setState（{data}）；
});
};
//模拟异步函数
xhrequest=（）=>{
返回新承诺（（解决、拒绝）=>{
常数srcData=[
[“Gabby George”、“业务分析师”、“明尼阿波利斯”]，
[“艾登·劳埃德”、“商业顾问”、“达拉斯”]，
[“贾登·柯林斯”、“律师”、“圣安娜”]，
[“弗兰基·里斯”、“商业分析师”、“圣彼得堡”]，
[“阿伦·罗斯”、“业务分析师”、“托莱多”]
];
const maxRound=Math.floor（Math.random（）*2）+1；
常量数据=[…数组（maxRound）]。减少(
acc=>acc.push（…srcData）和acc，
[]
);
data.sort（（a，b）=>0.5-Math.random（））；
设置超时（（）=>{
解析（数据）；
}, 250);
});
};
changePage=page=>{
这个.xhrequest（`/myApiServer？page=${page}`）。然后（data=>{
这是我的国家({
第页：第页，
数据
});
});
};
render（）{
常量列=[“名称”、“标题”、“位置”]；
const{data，page，count}=this.state；
常量选项={
过滤器：对，
filterType:“下拉列表”，
响应：“堆叠”，
服务器端：是的，
伯爵：伯爵，
第页：第页，
onTableChange：（操作，表状态）=>{
日志（操作，表状态）；
//开发人员可以根据动作或动作对变更作出反应
//从整体上审视国家，做任何他们想做的事
开关（动作）{
案例“changePage”：
this.changePage（tableState.page）；
打破
}
}
};
返回(
);
}
}
ReactDOM.render（

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"));