如何在Ant Design中实现两个表格的分页联动？

Got it, let's break down how to make two Ant Design tables sync their pagination when either one's page is changed. The core idea is to share a single pagination state between both tables—so when one table's page changes, it updates this shared state, which in turn triggers the other table to jump to the same page.

Step-by-Step Implementation #

Here's a practical React example using functional components and hooks:

1. Set up shared pagination state
   We'll use React's useState to hold the current page and page size that both tables will use.

2. Create a unified pagination change handler
   This function will update the shared state whenever either table's pagination is adjusted, and trigger data fetching for both tables (if you're loading data from an API).

3. Pass the shared state and handler to both tables
   Each table will use the same pagination config and onChange handler to stay in sync.

Code Example #

import React, { useState, useEffect } from 'react';
import { Table } from 'antd';

const SyncPaginationTables = () => {
  // Shared pagination state
  const [pagination, setPagination] = useState({
    current: 1,
    pageSize: 10,
  });
  
  // Sample data states for both tables (replace with your actual data fetching)
  const [table1Data, setTable1Data] = useState([]);
  const [table2Data, setTable2Data] = useState([]);

  // Fetch data for both tables when pagination changes
  useEffect(() => {
    // Replace these with your actual API calls
    fetchTableData(1, pagination.current, pagination.pageSize).then(data => setTable1Data(data));
    fetchTableData(2, pagination.current, pagination.pageSize).then(data => setTable2Data(data));
  }, [pagination.current, pagination.pageSize]);

  // Unified pagination change handler
  const handlePaginationChange = (page, pageSize) => {
    setPagination({ current: page, pageSize });
  };

  // Mock data fetch function (replace with your real API logic)
  const fetchTableData = async (tableId, page, pageSize) => {
    // Simulate API delay
    await new Promise(resolve => setTimeout(resolve, 500));
    // Generate dummy data based on table and page
    const start = (page - 1) * pageSize;
    return Array.from({ length: pageSize }, (_, i) => ({
      key: start + i,
      name: `Table ${tableId} Item ${start + i + 1}`,
      value: Math.floor(Math.random() * 100),
    }));
  };

  // Column definitions (customize these for your tables)
  const tableColumns = [
    { title: 'Name', dataIndex: 'name', key: 'name' },
    { title: 'Value', dataIndex: 'value', key: 'value' },
  ];

  return (
    <div style={{ padding: '20px' }}>
      <h3>Table 1</h3>
      <Table
        columns={tableColumns}
        dataSource={table1Data}
        pagination={{
          ...pagination,
          total: 100, // Replace with actual total items for Table 1
          onChange: handlePaginationChange,
        }}
      />
      
      <h3 style={{ marginTop: '40px' }}>Table 2</h3>
      <Table
        columns={tableColumns}
        dataSource={table2Data}
        pagination={{
          ...pagination,
          total: 80, // Replace with actual total items for Table 2
          onChange: handlePaginationChange,
        }}
      />
    </div>
  );
};

export default SyncPaginationTables;

Key Notes #

• Shared State: Both tables use the same pagination state, so changing it from either table affects both.
• Data Sync: The useEffect hook triggers data fetching for both tables whenever the page or page size changes, ensuring they load the correct data for the current page.
• Flexible Total Items: Even if each table has a different total number of items, the page number will still sync—each table's pagination will handle its own total appropriately.

If you're using a state management library like Redux or Zustand, you can lift the pagination state to your global store instead of local state, which works great for larger applications where tables might be in different components.

内容的提问来源于stack exchange，提问作者Tim Scott