ag-grid-community: Modelo de linha infinita para paginação do lado do servidor, versão gratuita da comunidade agGrid -Não funciona como paginação do lado do servidor
Eu gastei um bom tempo nisso para entender e implementar, mas parece que a documentação não foi escrita de forma muito clara ou não estou conseguindo entender alguma coisa básica.
Usando ag-grid-community 22.1.1, não é possível alterar muitos códigos de back-end, portanto, sugestões para alterações no back-end não funcionariam. A melhor opção que pude ver é o modelo de linha infinita, conforme explicado. documentação oficial ag-grid

De acordo com a imagem acima, se minha API de back-end estiver lenta e retornar dados lentamente, o que não posso ajudar muito porque, por sua vez, chamar alguma API externa fora do meu controle retorna respostas lentas.
- A grade chama a API de back-end que retorna 500 registros em 200 segundos.
- O usuário precisa esperar mais de 3 minutos para ver os dados na tela.
- Com base no modelo de linhas infinitas, pensei que após a implementação se
cacheBlockSize
fosse 50, eu poderia pedir ao servidor para enviar 50 registros e a resposta para ver os dados na grade seria mais rápida e quando clicado em seguida, buscará os próximos 50 e o tempo para cada bloco seria ser 20 segundos . - Mas não está funcionando assim, a chamada http backend está esperando que todos os registros voltem e só então começa a renderizar a grade e mostra qualquer resultado, então ainda temos que esperar 200 segundos para ver os dados. Então, de que adianta chamar essa rolagem infinita de lado do servidor?
- Além disso, minha implementação está correta, pois pude ver o cursor se movendo nas ferramentas de desenvolvimento do Chrome de 0-50 pela primeira vez e depois de 50-100
Respostas
Você escreveu que não pode alterar muito código de back-end, então não tenho certeza se você pode fazer algo assim, mas terá que definir um datasource
objeto com getRows()
pelo menos. Esse retorno de chamada será chamado toda vez que a grade tentar buscar novas linhas do servidor, e leva os parâmetros vistos aqui .
Quando esse retorno de chamada for acionado, você terá que chamar sua Promise
função, que recupera seus dados com o params.startRow
parâmetro, e params.endRow
ou o cacheBlockSize
que é 50, como você diz.
Se a busca for bem-sucedida, você chama successCallback(rowsRetrievedOnThisFetch, lastRow)
, onde lastRow
está o índice da última linha de seus dados se todos os seus dados estiverem na grade . Se nem todos os dados é na grade ainda, conjunto lastRow
igual a undefined
, null
ou -1
.
Mais tarde, quando todas as 500 linhas estiverem carregadas, você pode definir lastRow = 500
e chamar successCallback(rowsRetrievedOnThisFetch, 500)
.
Isso funciona se você puder buscar dados em blocos, em vez de todos de uma vez. Cada vez que você chama a função fetch, você terá que especificar o intervalo de linhas que deseja buscar do banco de dados. Mas você só pode fazer isso se sua API oferecer suporte.
Além disso, ao usar o modelo de linha infinita, a grade não filtrará ou classificará as linhas por conta própria. Você terá que passar params.filterModel
e params.sortModel
respectivamente em sua consulta quando getRows()
disparar se quiser usar a filtragem e classificação do lado do servidor.
ATUALIZAR
Dê uma olhada neste exemplo: https://plnkr.co/edit/pqBAS1cnjKiBoqeQ. Ele carrega 500 linhas em lotes de 50. Cada vez que você rola para baixo, as próximas 50 linhas são carregadas até que todas as 500 estejam na grade.