React MUI-Datatable服务端分页初始页码设为1的问题

这个问题其实是MUI-Datatable的页码索引规则和你的后端服务不匹配导致的：MUI-Datatable内部使用的是0-based索引（也就是第一页对应page=0），而你的后端接口用的是1-based页码（第一页对应page=1），这就造成了初始加载和分页切换时的偏移问题。

下面是具体的修复步骤和修改后的代码：

核心调整点 #

• 前端的page状态改为0-based，初始值设为0
• 请求后端时，把前端的page值加1，转换成后端需要的1-based页码
• 在options里显式设置page: 0，确保表格初始加载时对应后端的第一页
• 分页切换时直接使用tableState.page（0-based）更新状态，无需额外转换

修改后的完整代码 #

import { useState, useEffect } from 'react';
import MUIDataTable from "mui-datatables";
import axios from 'axios';

// 假设columns是已定义的列配置
const columns = [...];
const config = {...}; // 你的请求配置

const NetflixRankings = () => {
  // 前端page改为0-based，初始值0
  const [netflixData, setNetflixData] = useState({});
  const [page, setPage] = useState(0);
  const countPerPage = 10;

  const getNetflixData = () => {
    // 请求时把前端page+1，转换成后端的1-based页码
    axios.get(`/netflix/ranks/?page=${page + 1}`, config).then(res => {
      setNetflixData(res.data);
    }).catch(err => {
      setNetflixData({});
    });
  };

  const options = {
    filter: true,
    filterType: 'multiselect',
    serverSide: true,
    count: netflixData.count || 0,
    rowsPerPage: countPerPage,
    rowsPerPageOptions: [],
    // 显式设置初始page为0（对应后端第一页）
    page: 0,
    onTableChange: (action, tableState) => {
      if (action === 'changePage') {
        // 直接使用tableState的0-based page更新状态
        setPage(tableState.page);
      } else {
        console.log('action not handled.');
      }
    },
  };

  useEffect(() => {
    getNetflixData();
  }, [page]);

  return (
    <MUIDataTable 
      title="Netflix Rankings" 
      data={netflixData.results || []} 
      columns={columns} 
      options={options} 
    />
  );
};

export default NetflixRankings;

为什么这样能解决问题？ #

1. 初始加载时，前端page=0，请求后端page=1，拿到第一页数据，同时表格的page:0设置让MUI-Datatable显示第一页的分页状态
2. 点击「下一页」时，tableState.page变为1，前端请求后端page=2，对应表格的第二页，完全匹配
3. 回退分页时，tableState.page会从1回到0，不会出现负数——因为MUI-Datatable会自动处理分页的边界（不能小于0）

这样调整后，前端的分页状态和后端的页码规则就完全对齐了，不会再出现初始无响应、页码偏移或者0页的问题。

内容的提问来源于stack exchange，提问作者Simeon Aleksov