Pagination Theory

[blueocean0413]

Let's first look at what values we need as props to our Pagination component:

totalCount: represents the total count of data available from the source. currentPage: represents the current active page. We'll use a 1-based index instead of a traditional 0-based index for our currentPage value. pageSize: represents the maximum data that is visible in a single page. onPageChange: callback function invoked with the updated page value when the page is changed. siblingCount (optional): represents the min number of page buttons to be shown on each side of the current page button. Defaults to 1.

[acmicpc0614]

You can use this code.

const Pagination = ({ totalCount, currentPage, pageSize, onPageChange, siblingCount = 1 }) => {
    // Logic for pagination
    const totalPages = Math.ceil(totalCount / pageSize);

    // Handle page change
    const handlePageChange = (newPage) => {
        if (newPage !== currentPage) {
            onPageChange(newPage);
        }
    };

    return (
        <div>
            {/* Render pagination buttons */}
            {Array.from({ length: totalPages }, (_, index) => (
                <button key={index + 1} onClick={() => handlePageChange(index + 1)}>
                    {index + 1}
                </button>
            ))}
        </div>
    );
};