CCLee / Blog / Create a Paging API in Spring Boot

1. Returning Page From CrudRepository

In EventRepository I created the following signature:

1import dev.james.alicetimetable.commons.database.entities.Event
2import org.springframework.data.domain.Page
3import org.springframework.data.domain.Pageable
4import org.springframework.data.jpa.repository.Query
5import org.springframework.data.repository.CrudRepository
6import java.util.UUID
7
8interface EventRepository : CrudRepository<Event, Int> {
9    ...
10
11    @Query("""
12        select e from Event e
13        order by e.createdAt desc
14    """)
15    fun findByPageAndLimit(pageable: Pageable): Page<Event>
16}

We also define a wrapper data class for consumption of frontend:

1data class EventsWithTotal(
2    val events: List<EventDTO>,
3    val total: Long
4)

now we combine everything to get:

1@Service
2class EventQueryApplicationService(
3    private val eventRepository: EventRepository
4) {
5    fun getEvents(page: Int, limit: Int): EventsWithTotal {
6        val pageable = PageRequest.of(page, limit)
7        val eventPage = eventRepository.findByPageAndLimit(pageable)
8        val result = EventsWithTotal(events = eventPage.content.map { it.toDTO() },
9                                     total = eventPage.totalElements)
10        return result
11    }
12}

Here we have returned two results to frontend to accomplish pagination:

In line 8 we return the list of paged elements to the frontend.
In line 9 we return the total number of all matching rows to frontend so that it can show the number of pages.

2. Frontend

2.1. The Paging Result

2.2. Component for Pagination

2.2.1. Implementation

In the following we use some of the elements from shadcn:

1import {
2    Pagination,
3    PaginationContent,
4    PaginationEllipsis,
5    PaginationItem,
6    PaginationLink,
7    PaginationNext,
8    PaginationPrevious,
9} from '@/components/ui/pagination';
10
11/**
12 *  There are plenty of messy logic on determining how numbers are shown, can ignore it.
13 */
14const CustomPagination = (props: {
15    consecutivePagesBlockSize: number;
16    currentPageIndex: number;
17    totalPages: number;
18    onPageIndexChange: (page: number) => void;
19}) => {
20    const { consecutivePagesBlockSize, currentPageIndex, totalPages, onPageIndexChange } = props;
21    const availablePageNumbers = Array.from({ length: totalPages }, (_, i) => i);
22    const lastPageIndex = totalPages - 1;
23    const consecutivePagesBlockStartIndex = Math.max(currentPageIndex - 1, 0);
24    const approachesTheEnd = lastPageIndex - consecutivePagesBlockStartIndex <= consecutivePagesBlockSize - 1;
25    const consecutivePagesBlock = availablePageNumbers.slice(
26        approachesTheEnd ? lastPageIndex - (consecutivePagesBlockSize - 1) : consecutivePagesBlockStartIndex,
27        consecutivePagesBlockStartIndex + consecutivePagesBlockSize
28    );
29
30    const forceDisplayPageOne = currentPageIndex >= consecutivePagesBlockSize - 1;
31    const forceDisplayLast = lastPageIndex - currentPageIndex >= consecutivePagesBlockSize - 1;
32    if (totalPages <= consecutivePagesBlockSize) {
33        return (
34            <>
35                <Pagination>
36                    <PaginationContent>
37                        <PaginationItem>
38                            <PaginationPrevious
39                                href="#"
40                                onClick={() => onPageIndexChange(Math.max(currentPageIndex - 1, 0))}
41                            />
42                        </PaginationItem>
43                        {availablePageNumbers.map(page => {
44                            const isActive = page === currentPageIndex;
45                            return (
46                                <PaginationItem onClick={() => onPageIndexChange(page)}>
47                                    <PaginationLink href="#" isActive={isActive}>
48                                        {page + 1}
49                                    </PaginationLink>
50                                </PaginationItem>
51                            );
52                        })}
53                        <PaginationItem>
54                            <PaginationNext
55                                href="#"
56                                onClick={() => onPageIndexChange(Math.min(currentPageIndex + 1, totalPages - 1))}
57                            />
58                        </PaginationItem>
59                    </PaginationContent>
60                </Pagination>
61            </>
62        );
63    } else {
64        return (
65            <>
66                <Pagination>
67                    <PaginationContent>
68                        <PaginationItem>
69                            <PaginationPrevious
70                                href="#"
71                                onClick={() => onPageIndexChange(Math.max(currentPageIndex - 1, 0))}
72                            />
73                        </PaginationItem>
74                        {forceDisplayPageOne && (
75                            <>
76                                <PaginationItem onClick={() => onPageIndexChange(0)}>
77                                    <PaginationLink href="#" isActive={currentPageIndex === 0}>
78                                        1
79                                    </PaginationLink>
80                                </PaginationItem>
81                                {currentPageIndex >= 3 && totalPages > consecutivePagesBlockSize + 1 && (
82                                    <PaginationItem>
83                                        <PaginationEllipsis />
84                                    </PaginationItem>
85                                )}
86                            </>
87                        )}
88                        {consecutivePagesBlock.map(page => {
89                            const isActive = page === currentPageIndex;
90                            return (
91                                <PaginationItem onClick={() => onPageIndexChange(page)}>
92                                    <PaginationLink href="#" isActive={isActive}>
93                                        {page + 1}
94                                    </PaginationLink>
95                                </PaginationItem>
96                            );
97                        })}
98                        {lastPageIndex - currentPageIndex >= consecutivePagesBlockSize &&
99                            totalPages > consecutivePagesBlockSize + 1 && (
100                                <PaginationItem>
101                                    <PaginationEllipsis />
102                                </PaginationItem>
103                            )}
104                        {forceDisplayLast && (
105                            <PaginationItem>
106                                <PaginationLink
107                                    href="#"
108                                    isActive={currentPageIndex === lastPageIndex}
109                                    onClick={() => onPageIndexChange(lastPageIndex)}
110                                >
111                                    {lastPageIndex + 1}
112                                </PaginationLink>
113                            </PaginationItem>
114                        )}
115
116                        <PaginationItem>
117                            <PaginationNext
118                                href="#"
119                                onClick={() => onPageIndexChange(Math.min(currentPageIndex + 1, totalPages - 1))}
120                            />
121                        </PaginationItem>
122                    </PaginationContent>
123                </Pagination>
124            </>
125        );
126    }
127};
128
129export default CustomPagination;
130

2.2.2. Usage

In my logging page I simply define

1export default function Logging() {
2    const [page, setPage] = useState(0);
3    const { data: loggings, isLoading } = 
4        eventApi.endpoints.getEvents.useQuery({ page, limit: LIMIT });
5
6    return (
7            <div>
8                <CustomPagination
9                    consecutivePagesBlockSize={3}
10                    currentPageIndex={page}
11                    totalPages={Math.ceil((loggings?.total || 0) / LIMIT)}
12                    onPageIndexChange={page => {
13                        setPage(page);
14                    }}
15                />
16            ...

Contents