HTML paginado com troca de página automático

Front-end
#1

Olá, preciso da ajuda de vocês no seguinte. Creio que muitos de vocês já estiveram em aeroportos e acompanham no monitor a chegada/partida dos voos. No monitor é mostrada uma lista de voos e a cada n segundos é feita a troca de página. Quando chegar na última e for carregar a primeira então é feita uma nova busca e o ciclo se repete. A minha necessidade é exatamente essa. Preciso implementar uma tela HTML com backend Java que tenha esse comportamento, ou seja, retornar uma lista do backend com, por exemplo 100 registro, cada página terá 20 registro, dessa forma terei 5 páginas. Deve posicionar na primeira página e depois de 20 segundo deve ir para a segunda página e assim por diante. Quando chegar na última página então deve fazer a busca no backend e carregar a lista atualizada e repetir a paginação.
Alguém tem alguma ideia a respeito?

#2

Um jeito simples seria usar o setTimeout do javascript, fazendo uma requisição ao servidor após exibir todas as páginas, para recarregar o conteúdo. Seria basicamente 2 loops usando serTimeout: um para carregar dos dados do servidor (os 100 registros) e outro para atualizar a página de 20 em 20, a cada 20 segundos.

Abraço.

#3

A questão do setTimeout resolvi, mas ainda to com dificuldade na questão pegar uma determinada página a cada ciclo do time.

#4

Não entendi bem qual a dificuldade que você está tendo. É para renderizar de 20 em 20 ou para buscar novas informações no servidor após rodar tudo? O que você quer dizer com “resolvi a parte do setTimeout”?

Grosso modo, você teria algo como:

var todosOsDados = []; // array para armazenar os 100 registros
var indice = 0;

renderizarItem: function(dadosDoItem){
  // renderiza 1 item
}

renderizarConjunto: function(){
  for(let i = indice ; i < indice + 20; i++){
    renderizarItem(todosOsDados[i]);
  }
}

renderizar: function(){
  indice = 0;
  renderizarConjunto();
  setTimeout(function({
      indice += 20;
      renderizarConjunto();
  }, 20000);
}

buscarNoServidor: function(funcaoDeCallback){
  // busca via ajax e coloca no array dados

  // Obs: chamar o callback somente se a requisição tiver sucesso
  funcaoDeCallback();
}

while(true){
   buscarNoServidor(renderizar);
}

Abraço.