Como adicionar paginação à tabela

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 widget Paginação , existe uma solução. Vamos descobrir como implementá-lo com a ajuda do Elementor.

Para adicionar paginação à tabela já existente, comece verificando um Page Editor .

Se você já adicionou uma tabela no Elementor, basta digitar “Paginação” na caixa de pesquisa e você encontrará o widget Paginação do plugin JetSmartFilters . Arraste e solte abaixo da Tabela de Produtos .

A primeira coisa que precisamos fazer para exibir nossa paginação corretamente é escolher a fonte de onde os dados serão extraídos. No nosso caso, escolheremos um provedor apropriado – “JetEngine Dynamic Table” –   no menu suspenso Paginação para em nossa guia Conteúdo . Em contraste, a paginação seria aplicada diretamente à Tabela Dinâmica.

Também existe a oportunidade de alterar o tipo de aplicação de “AJAX” para “Page Reload” e preencher o Query ID caso você use vários widgets do mesmo provedor na página.

A próxima etapa é ajustar as configurações dos controles .

Você pode optar por mostrar ou ocultar os botões Anterior/Próximo . Depende de suas preferências pessoais. Abaixo dessa alternância, existem os campos Texto anterior e Próximo texto que permitem inserir o texto mostrado nos rótulos dos botões antes e depois dos números de paginação .

Além disso, você pode trabalhar com números de deslocamento para definir valores diferentes para exibição.

Então você só precisa aplicar todos os estilos e configurações avançadas desejados e verificá-los no front end. A tabela de produtos Elementor está pronta.

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

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 .