最近在项目中遇到表格数据量较大的情况，所以考虑进行分页加载，并且需要能够记录跨页的选项，于是想到一种客户端根据数据总长度进行表格数据初始化的操作，再根据页码进行数据填充，避免一次行请求过多数据。
客户端设置如下：

constructor() {
       super();
       this.columns = [
           {
               title: '序号',
               dataIndex: 'order',
               width: '20%',
           },
           {
               title: '广告牌编号',
               dataIndex: 'device_id',
               width: '20%',
           },
           {
               title: '所属公司',
               dataIndex: 'device_company',
               width: '20%',
           },
           {
               title: '所属区域',
               dataIndex: 'device_region',
               width: '20%',
           },
           {
               title: '所属路段',
               dataIndex: 'device_road',
               width: '20%',
           },
       ];
       this.state = {
           devData:[],
           selectedRowKeys: [],
           isModalShow:false,
           currentPage:1,
           loadedPages:[],   //已经加载过的页
           totalNum:0,
       };
   }
   componentDidMount() {
       this.getTotalNum();
   }
   getTotalNum(){
       let self=this;
       let dataSend={
           userName: CURRENT_USER,
       };
       console.log(dataSend);
       $.ajax({
           url: API_URL + "/system/data_permission/getBillboardTotal",
           type: "POST",
           data: dataSend,
           success: function (result) {
               console.log(result);
              let total=result.totalNum;
              console.log(total);
               let tableData = [];
               for (let i = 0; i <total; i++) {  //根据总长度对表格数据初始化
                   tableData.push({
                       key: i,
                       order: i + 1,
                       device_id:  '',
                       device_company: '',
                       device_region: '',
                       device_road: '',
                   });
               }
               self.setState({totalNum:total,devData:tableData});
               self.getDevData(1);
           },
           error: function (error) {
               if (error.responseText) {
                   message.error(error.responseText);
               } else {
                   message.error('请求出错啦');
               }
           }
       });
   }
   getDevData(page){
       let self=this;
       if(this.state.loadedPages.indexOf(page)=== -1){  //如果某页数据重未加载过，则发起请求
           let dataSend={
               userName:CURRENT_USER,
               page:page,
           };
           console.log(dataSend);
           $.ajax({
               url: API_URL + "/system/data_permission/getBillboardData",
               type: "POST",
               data: dataSend,
               success: function (result) {
                   console.log(result);
                   let data=result.data.tableData;
                   let tableData=self.state.devData;
                   let len=data.length;
                   console.log(len)
                   for (let i = 0; i <len; i++) {
                       let index=i+(page-1)*8;
                       tableData[index].key= data[i].billboardId;
                       tableData[index].device_id= data[i].billboardId;
                       tableData[index].device_company= data[i].connectCompany;
                       tableData[index].device_region= data[i].connectRegion;
                       tableData[index].device_road= data[i].connectRoad;
                   }
                   self.setState({loadedPages:self.state.loadedPages.concat(page)});
                   console.log(self.state.devData,self.state.loadedPages);
               },
               error: function (error) {
                   if (error.responseText) {
                       message.error(error.responseText);
                   } else {
                       message.error('请求出错啦');
                   }
               }
           });
       }
   }
   onTableSelectChange(selectedRowKeys) {
       console.log('selectedRowKeys changed: ', selectedRowKeys);
       this.setState({selectedRowKeys});

   }
   onPageChange(page){
       console.log(page);
       this.setState({
           currentPage: page,
       });
       this.getDevData(page);
   }
render(){
       const {selectedRowKeys} = this.state;
       const rowSelection = {
           selectedRowKeys,
           onChange: this.onTableSelectChange.bind(this),
       };
       const pagination = {
           pageSize: 8,
           total:this.state.totalNum,
           onChange:this.onPageChange.bind(this),
           current:this.state.currentPage,
       };
       const hasSelected = selectedRowKeys.length > 0;
       return (
           <div>
               <Table columns={this.columns} dataSource={this.state.devData} 
                      pagination={pagination}
                      rowSelection={rowSelection}
                      style={{
                          marginTop: 5, marginBottom: 5, marginRight: 5, marginLeft: 5
                      }}/>
           </div>
       );
   }

服务端设置如下：其中35代表数据总长度,8代表客户端中表格每页条目数，可以根据需求修改

console.log(req.body);
    let page=req.body.page;
    let lastPage=Math.ceil(35/8);//最后一页所在页码
    let lastPageLen=35%8;//最后一页长度
    console.log(lastPage);
    console.log(lastPageLen);
  if(page===lastPage.toString()&&lastPageLen!=0){//避免刚好整除的情形
        let data=[];
        for(let i=0;i<lastPageLen;i++){
            let str=(page-1)*8+(i+1);
            data.push({
                billboardId:'广告牌'+str,
                connectCompany:'企业',
                connectRegion:'区域',
                connectRoad:'路段',
            });
        }
        let result={
            data: {
                tableData:data,
            }
        }
        res.send(result);
    }else{
        let data=[];
        for(let i=0;i<8;i++){
            let str=(page-1)*8+(i+1);
            data.push({
                billboardId:'广告牌'+str,
                connectCompany:'企业',
                connectRegion:'区域',
                connectRoad:'路段',
            });
        }
        let result={
            data: {
                tableData:data,
            }
        }
        res.send(result);
    }