ant design中如何实现link到table的分页？

Question

我在 ant design 中使用了两个表，我想做的是，如果我单击其中一个分页表的第 2 页，它会更改两个表的数据。我该怎么做？

Answer 1

您要做的是控制分页，以便两个表共享相同的分页状态和相同的 onChange 事件侦听器。

这里有一个简单的例子，只控制 Pagination component via the Table's pagination 道具：

import * as React from "react";
import { Table } from "antd";
import data from "./data";
import "antd/dist/antd.css";
import "./styles.css";

const columns = [
  {
    title: "Title",
    dataIndex: "title",
    key: "title"
  },
  {
    title: "Body",
    dataIndex: "body",
    key: "body"
  }
];

export default function App() {
  const [page, setPage] = React.useState(1);
  const handleChange = (page) => {
    setPage(page);
  };
  return (
    <div className="App">
      <h1>Table 1</h1>
      <Table
        columns={columns}
        pagination={{
          current: page,
          onChange: handleChange,
          total: data.length,
          showSizeChanger: false
        }}
        dataSource={data}
        rowKey="id"
      />
      <br />
      <h1>Table 2</h1>
      <Table
        columns={columns}
        pagination={{
          current: page,
          onChange: handleChange,
          total: data.length,
          showSizeChanger: false
        }}
        dataSource={data}
        rowKey="id"
      />
    </div>
  );
}

演示:

Antd shared pagination

演示代码:

ant design中如何实现link到table的分页？

How to link two table's pagenation in ant design?

reactjs

antd