{"id":227714,"date":"2022-09-25T17:10:00","date_gmt":"2022-09-25T14:10:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=227714"},"modified":"2022-11-08T23:42:37","modified_gmt":"2022-11-08T20:42:37","slug":"como-criar-uma-tabela-de-pesquisa-com-wpdatatables-e-forminator","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/como-criar-uma-tabela-de-pesquisa-com-wpdatatables-e-forminator\/","title":{"rendered":"Como criar uma tabela de pesquisa com wpDataTables e Forminator"},"content":{"rendered":"\n

Usar formul\u00e1rios de usu\u00e1rio e pesquisas \u00e9 uma atividade di\u00e1ria para alguns de n\u00f3s. O problema com essas pesquisas \u00e9 que elas s\u00e3o um pouco sem vida e voc\u00ea n\u00e3o pode realmente us\u00e1-las de maneira visual.<\/p>\n

Ou voc\u00ea pode?<\/p>\n

Na verdade, sim, sim, voc\u00ea pode.<\/p>\n

Se n\u00e3o ficou \u00f3bvio o suficiente na introdu\u00e7\u00e3o e talvez no t\u00edtulo, mostraremos n\u00e3o apenas que \u00e9 poss\u00edvel criar uma tabela de pesquisa, mas tamb\u00e9m como faz\u00ea-lo.<\/p>\n

Primeiras coisas primeiro<\/strong><\/h2>\n

Vamos come\u00e7ar do come\u00e7o.<\/p>\n

Primeiro, para criar uma tabela de pesquisa, voc\u00ea precisar\u00e1 de uma fonte de dados que contenha dados de formul\u00e1rio. Em nosso exemplo, usaremos o plugin Forminator WordPress<\/a> para criar um formul\u00e1rio de pesquisa. \u00c9 muito f\u00e1cil de usar, ent\u00e3o vamos pular esta parte.<\/p>\n

Vamos para a parte de tornar os dados do formul\u00e1rio visualmente atraentes. Para essa tarefa espec\u00edfica, usaremos o complemento de integra\u00e7\u00e3o gratuito do Forminator<\/a> que o wpDataTables possui.<\/p>\n

Voc\u00ea conseguiu no wordpress.org?<\/p>\n

Excelente. Vamos continuar.<\/p>\n

Obviamente, voc\u00ea tamb\u00e9m precisar\u00e1 do wpDataTables, seja em sua vers\u00e3o gratuita<\/a> ou premium<\/a>. Eu recomendo que voc\u00ea use a vers\u00e3o premium. O grande n\u00famero de recursos que voc\u00ea tem na vers\u00e3o completa \u00e9 algo que voc\u00ea absolutamente precisa se estiver trabalhando com dados.<\/p>\n

E voc\u00ea tamb\u00e9m precisar\u00e1 da vers\u00e3o gratuita<\/a> ou pro<\/a> que o Forminator possui.<\/p>\n

Vamos come\u00e7ar a criar<\/strong><\/h2>\n

A primeira etapa do processo envolve a cria\u00e7\u00e3o de um formul\u00e1rio de pesquisa com o plugin Forminator. Neste exemplo, criaremos uma "Pesquisa de satisfa\u00e7\u00e3o do cliente", algo que voc\u00ea provavelmente j\u00e1 fez no passado.<\/p>\n

\"Como<\/a><\/p>\n

Este processo \u00e9 extremamente f\u00e1cil gra\u00e7as ao assistente do Forminator. Mais informa\u00e7\u00f5es sobre isso est\u00e3o em seus<\/a> documentos<\/a>.<\/p>\n

\"Como<\/a><\/p>\n

Voc\u00ea tamb\u00e9m fez isso? Bom! Agora vamos publicar seu formul\u00e1rio em sua p\u00e1gina ou post para que voc\u00ea possa coletar dados de seus usu\u00e1rios. Voc\u00ea vai precisar disso.<\/p>\n

Digamos que voc\u00ea realmente fez isso agora enquanto lia estas linhas e j\u00e1 recebeu algumas entradas \u00fateis.<\/p>\n

Em seguida, v\u00e1 para wpDataTables<\/strong> -> Create a Table<\/strong>, e escolha a op\u00e7\u00e3o “Create a table linked to an existing data source"<\/strong> e clique em “Next”<\/strong>.<\/p>\n

\"Como<\/a><\/p>\n

Em seguida, escolha “Forminator Form”<\/strong> como o tipo de fonte de dados de entrada. Depois de escolher “Forminator Form”<\/strong> como tipo de mesa, uma nova caixa de sele\u00e7\u00e3o “Choose a Forminator Form”<\/strong> aparecer\u00e1. Com esta caixa de sele\u00e7\u00e3o, voc\u00ea pode escolher um formul\u00e1rio de pesquisa<\/strong> que j\u00e1 foi criado com o plug-in Forminator.<\/p>\n

\"Como<\/a><\/p>\n

Ap\u00f3s esta etapa, voc\u00ea ver\u00e1 uma caixa de sele\u00e7\u00e3o “Escolher campos para mostrar como colunas”<\/strong> que permite escolher os campos do formul\u00e1rio de pesquisa<\/strong> que voc\u00ea usar\u00e1 como colunas. Escolheremos todos os campos do formul\u00e1rio e dos campos comuns apenas a data de entrada (voc\u00ea pode escolher todos eles se precisar).<\/p>\n

\"Como<\/a><\/p>\n

Ap\u00f3s clicar no bot\u00e3o “Salvar altera\u00e7\u00f5es”<\/strong>, uma tabela \u00e9 criada.<\/p>\n

\"Como<\/a><\/p>\n

Tada!<\/p>\n

Agora voc\u00ea tem uma tabela de pesquisa em seu site WordPress. E nem foi dif\u00edcil criar um.<\/p>\n

Como na maioria dos formul\u00e1rios de pesquisa, as perguntas podem ser muito longas, conv\u00e9m ajustar a largura da coluna alterando a entrada "Exibir cabe\u00e7alhos"<\/strong> na guia Exibir nas configura\u00e7\u00f5es da coluna<\/strong>.<\/p>\n

Alternativamente, voc\u00ea pode ajustar a tabela inteira definindo “Limit table width” e “Word wrap option”<\/a>. Se voc\u00ea gosta de mais, voc\u00ea pode definir o recurso Scrollable<\/a> ou Responsive em desktops<\/a>.<\/p>\n

\"Como<\/a><\/p>\n

Para as principais perguntas (colunas) voc\u00ea pode definir diferentes tipos de filtro (Filtragem avan\u00e7ada<\/a>) e no nosso caso vamos defini-lo como um tipo de filtro Select-box e ativar a op\u00e7\u00e3o "Filtros no formul\u00e1rio"<\/strong> na guia Ordena\u00e7\u00e3o e Filtragem no configura\u00e7\u00f5es da tabela para mostrar os filtros acima da tabela.<\/p>\n

\"Como<\/a><\/p>\n

Se voc\u00ea precisar de personaliza\u00e7\u00e3o adicional de tabelas, h\u00e1 muitas op\u00e7\u00f5es em<\/p>\n