Antd 表格数据分页加载,并且能够跨页选择数据

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

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  0;
       return (
           
); }

服务端设置如下:其中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

你可能感兴趣的:(Antd 表格数据分页加载,并且能够跨页选择数据)