Olá Larissa, tudo bem?
Isso mesmo, a resposta paginada do Spring traz todas informações para que o front
consiga estruturar a pagina em cima disso, a grande questão vai ser a tecnologia utilizada, por exemplo com React
teríamos algo assim:
function App() {
const [topics, setTopics] = useState([]);
const [limit, setLimit] = useState(10);
const [page, setPage] = useState(0);
useEffect(() => {
async function fetchTopics() {
const data = await fetch(
`http://localhost:8080/topicos?page=${page}`
);
const topicsResponse = await data.json();
setTopics(topicsResponse.content);
setLimit(topicsResponse.totalPages);
}
fetchTopics();
}, [page]);
const handlePage = (number) => {
if(page + number >= limit || page + number < 0) return;
setPage(page+number);
}
return (
<div className="App">
<table>
<thead>
<tr>
<th> ID </th>
<th> Data</th>
<th>Titulo</th>
<th>Mensagem</th>
</tr>
</thead>
<tbody>
{topics && topics.map(topic => {
return (
<tr key={topic.id}>
<td>{topic.id}</td>
<td>{topic.titulo}</td>
<td>{topic.mensagem}</td>
<td>{new Date(topic.dataCriacao).toLocaleDateString("pt-BR")}</td>
</tr>
);
})}
</tbody>
</table>
<div>
<button onClick={ () => handlePage(1)} >Próxima</button>
<button onClick={ () => handlePage(-1)}>Anterior</button>
</div>
</div>
);
}
Então fazemos uma requisição base com a página sendo 0, e dessa requisição podemos selecionar o que julgamos importante, neste exemplo, eu peguei o totalPage
e dessa forma consigo criar um botão que aumente o número de páginas em 1 ( ou volte), e consigo controlar até que página ele pode ir para não fazer requisições incorretas para a API
No React
a função useEffect
é disparada sempre que um estado, que estamos observando, muda, então quando o usuário clica no botão de pŕoximo ou anterior, o número da página muda, e é disparada uma noma requisição para o backend
mudando apenas o parâmetro :)
Obviamente é um exemplo bem simples, mas dado o retorno pela a API
podemos criar um sistema bem completo, dar possibilidade do usuário selecionar a quantidade, criar botões para ir para paginas especificas (dado que temos a quantidade), etc.
Vai depender realmente da tecnologia utilizada :)
Abraços e Bons Estudos!