一、基本介紹
antdpagination是Ant Design組件庫中的一款分頁組件。它的核心作用就是展示分頁信息，並且用戶可以點擊上一頁、下一頁等控制項來實現翻頁。
在使用該組件的過程中，需要注意其props的使用方法和樣式的調整。
二、props詳解
1、current: 當前所在頁數，默認值為1。
2、total: 數據總條數，默認值為0。
3、pageSize: 每頁顯示條數，默認值為10。
4、onChange: 頁碼改變的回調函數，參數為改變後的頁碼。
5、showSizeChanger: 是否展示 pageSize 切換器，默認值為false。
6、pageSizeOptions: 指定每頁可以顯示多少條，配合showSizeChanger使用，常用於快速跳轉。
7、onShowSizeChange: pageSize 變化的回調函數。
8、showQuickJumper: 是否可以快速跳轉至某頁， 默認值為false。
9、showTotal: 用於顯示數據總量和當前數據順序，可以自定義模板。
三、代碼示例
1、基礎使用
import React, { useState } from 'react';
import { Pagination } from 'antd';
function onChange(pageNumber) {
console.log('Page: ', pageNumber);
}
function BasicPagination() {
return (
);
}
在這個示例中，我們設置了當前頁碼為1，該組件總共有50條數據，當頁碼改變時，回調函數onChange將會被觸發。
2、結合antdtable的使用示例
import React, { useState } from 'react';
import { Table, Pagination } from 'antd';
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
sorter: (a, b) => a.age - b.age,
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
},
];
const data = [
{
key: 1,
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
},
...
];
function TableWithPagination() {
const [pagination, setPagination] = useState({
current: 1,
pageSize: 5,
});
const onTableChange = (pagination, filters, sorter) => {
console.log('params', pagination, filters, sorter);
setPagination(pagination);
};
return (
這個示例中我們將Pagination和Table組合使用，並且在Table的onChange回調中，將Table當前的pagination狀態設置為Pagination的狀態。
3、自定義分頁展示
import React, { useState } from 'react';
import { Pagination } from 'antd';
function itemRender(current, type, originalElement) {
if (type === 'prev') {
return 上一頁;
}
if (type === 'next') {
return 下一頁;
}
return originalElement;
}
function CustomPagination() {
return (
);
}
在這個示例中，我們通過itemRender方法來實現自定義分頁展示，當頁碼類型為prev或者next時，我們可以將其展示為自定義文案。
四、總結
以上就是對於antdpagination分頁組件的詳細介紹，從props入手，通過代碼示例來演示如何使用該組件。在使用過程中，需要注意靈活使用組件的各種props，以及適時自定義組件的樣式和展示方式。
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/154201.html
微信掃一掃 
支付寶掃一掃 