Antd pagination分頁 自定義樣式和位置

• 改變paginationSize 的按鈕的位置的改變
  
  • 通過自定義Select和官方提供的pageSize 來自定義改變下拉框

    handleShowTotal = (total, range) => {
            let pageSizeOptions = [10, 20, 30, 40]
            return (
                <div>
                    顯示第 <span className='pageTotalNum'>{range[0]}</span> 條到第 <span className='pageTotalNum'>{range[1]}</span> 條記錄，總共{total}條記錄，每頁顯示&nbsp;
                    <Select value={this.state.pageSizeOption} size='small' onChange={this.handlePageSizeOption}>
                        {pageSizeOptions.map((v) => (
                            <Option key={v} value={v}>
                                {v}
                            </Option>
                        ))}
                    </Select>
                    &nbsp;條記錄
                </div>
            )
        }
    
        render() {
            const {data, pageSizeOption} = this.state
    
            const paginationConfig = {
                pageSize: pageSizeOption,
                showTotal: this.handleShowTotal,
            }
            return (
                <div>
                    <Table
                        tableLayout={'fixed'}
                        pagination={paginationConfig}
                        scroll={{x: 'max-content'}}
                        columns={reviewingTableConfig()}
                        dataSource={data}
                        rowKey={(record, index) => (record, index)}
                    />
                </div>
            )
        }
    }

  •  local 配置項

    • • • • • local:{配置項}
              	jump_to: '跳至',
              	jump_to_confirm: '確定',
              	page: '頁',
              	items_per_page: '條/頁',
              	// Pagination.jsx
              	prev_page: '上一頁',
              	next_page: '下一頁',
              	prev_5: '向前 5 頁',
              	next_5: '向后 5 頁',
              	prev_3: '向前 3 頁',
              	next_3: '向后 3 頁',

            •