Como adicionar paginação à tabela em Gutenberg

Em primeiro lugar, certifique-se de ter criado uma tabela usando JetEngine Tables Builder . Mas se ainda não o fez, temos um guia de construção de mesa para você. 

Caso este passo já tenha sido dado, não hesite em aplicar alguns ajustes. Um deles é Limite de Paginação de Consulta .

Personalizações de consulta adicionais

Para fazer algumas alterações no número de itens que serão mostrados em sua tabela, vá para JetEngine > Query Builder .

Lá você pode criar uma nova consulta ou modificar uma existente. 

Por exemplo, selecionamos WC Product Query . Representará todos os dados sobre nossos Produtos . 

Existem algumas configurações adicionais que você pode adaptar aos seus desejos. No entanto, agora estamos totalmente interessados ​​em Configurações de paginação .

Em primeiro lugar, certifique-se de ter ativado Ativar paginação . Dessa forma, a Consulta e Paginação de Tabelas funcionarão com mais eficiência. 

Alterando o limite de paginação

Para trabalhar com esta opção, vá até o campo Limite . Vamos começar com “4” itens.

Não se esqueça de salvar as alterações clicando no botão “ Atualizar Consulta” . Para verificar os resultados, abra uma página onde sua tabela é exibida.

Suponha que queiramos mostrar menos produtos em nossa tabela, por exemplo, apenas 2 deles. Nesse caso, temos que voltar ao JetEngine > Query Builder, escolher a consulta já criada limitada a quatro produtos e alterar o Limite para “2” nas Configurações de Paginação . 

Agora precisamos salvar nossa consulta novamente.

Mais uma vez, veremos se nossos ajustes são aplicados no front end. Para tal, dirija-se à página onde a tabela é apresentada.

Desta forma, você já sabe como alterar a quantidade de Produtos exibidos na tabela. 

Mas se você quiser exibir mais Produtos usando o bloco Paginação , existe uma solução. Vamos descobrir como implementá-lo com a ajuda de Gutenberg.

Para adicionar paginação à tabela, abra o Editor Gutenberg e prossiga para Adicionar nova seção clicando no ícone de adição . Digite Pagination e arraste e solte o bloco na área abaixo da tabela.

Escolha o provedor correto para o bloco Dynamic Table – “JetEngine Dynamic Table” – para atribuir esta paginação à tabela e escolha “AJAX” ou “Page Reload” no menu suspenso Aplicar tipo na guia Geral .

Na guia Controles , você pode ativar os botões Anterior/Próximo , alterar o texto exibido e definir valores de deslocamento .

Depois de concluir todas as configurações gerais , você pode estilizar o bloco Paginação com o plugin JetStyleManager . Depois de instalar este plugin, o ícone do pincel aparece no canto superior direito da tela.

Todo o trabalho está feito. Você pode verificar o resultado final no front end.

Agora você sabe como adicionar um bloco Pagination do plugin JetSmartFilters à tabela JetEngine usando Gutenberg. 

Além disso, você pode verificar como funciona a paginação para a tabela dinâmica de produtos em sua página de demonstração ao vivo .