如何导航到第一页和最后一页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/>
  );
}