如何导航到第一页和最后一页antd分页（反应）

Question

在我的表格组件中，我的分页选项如下：

const showTotal = (total, range) => {
  return `${range[0]}-${range[1]} of ${total}`
};

const  renderPagination=(current, type, originalElement)=>{
  if (type === 'prev') {
    return <a className="table-prev" >Previous</a>;
  } if (type === 'next') {
    return <a>Next</a>;
  }
  return originalElement;

}
  return (
   <Table
   className="process-table-container"
   size='middle'
   columns={columns}
   dataSource={tableData}
   pagination={{
    pageSize: 10,
    showSizeChanger: true,
    itemRender:(current, type, originalElement)=>renderPagination(current, type, originalElement),
    showTotal: showTotal,
    className: 'pagination'
    }}
   />
  )
}

我在itemRender有下一个和上一个选项，但是没有第一个和最后一个选项，如何在不使用自定义分页或表包装的情况下做到这一点？

输出应该是这样的

我把数字显示为无

Answer 1

最好使用showQuickJumper ，它比在first和last添加两个按钮更通用，更易读：

<Table
   ...
   pagination={{
    ...,
    itemRender:(current, type, originalElement)=>renderPagination(current, type, originalElement),
    ...,
    showQuickJumper: true
    }}
/>

演示：

---

如果仍然要添加两个按钮，则需要禁用分页pagination={false}并创建新的包装器组件，该组件将Table与您的自定义分页一起包装。

function TableWrapper(props) {
  // Pagintation state...
  ...
  return (
      <TableWithFirstLast>
         // Use Table component with pagination={false}
         // Use Pagination component
         // Add first and last work with Pagination
         // Control how much data need to be shown on table's dataSource
      <TableWithFirstLast/>
  );
}