Pergunta do WordPress TablePress: Use caixas de seleção para filtrar uma tabela

0
0
0

Um usuário perguntou ?

Olá Tobias,

obrigado por esse ótimo plugin. Também adoro extensões.

Meu objetivo é criar uma tabela que me permita filtrar uma coluna usando caixas de seleção. Eu estava pensando em arquivar esse objeto usando sua extensão “Row Filtering”. Minha ideia é analisar os valores da caixa de seleção no parâmetro “filtro”. Infelizmente, minhas habilidades de TI não são boas o suficiente no momento. É mesmo possível? E se sim, poderia me ajudar aqui por favor?

Esse exemplo mostra o que eu quero ter. As características 1 e 5 estão marcadas. Só quero mostrar as linhas que contêm as empresas 1 e 3.

[x] Recurso 1 [] Recurso 2 | [] Recurso 3 | [] Recurso 4 | [x] Recurso 5
O negócio | Característica

Empresa 1 Recurso 1, Recurso 4, Recurso 5 Companhia 2 Recurso 1, Recurso 2, Recurso 5, Recurso 4 Companhia 3 Recurso 1, Recurso 5,

Muito obrigado por seu esforço. Atenciosamente, Niklas

Este tópico foi modificado 2 anos, 8 meses atrás por. Este tópico foi modificado 2 anos, 8 meses atrás por.

(@tobiasbg)

2 anos, 8 meses atrás

Olá,

Obrigado pelo seu post e desculpe o transtorno.

Infelizmente não conheço uma solução para isso. Usar a extensão de filtro de linha aqui não funcionará realmente, como acontece no lado do servidor. Você precisará de alguma filtragem do lado do cliente, por exemplo. usando as funções de API da biblioteca JS DataTables de

Abraços, Tobias

(@nklsbrn)

2 anos, 8 meses atrás

Olá Tobias, obrigado pela resposta. Isso realmente me ajudou! Agora eu tenho o código que me fornece a funcionalidade para resolver o problema. Infelizmente, estou com outro problema no momento. Não consigo descobrir como integrar isso com a tabela.

Você poderia me ajudar aqui por favor?

$(document).ready( function () {
  var table = $('#example').DataTable();
  $(':checkbox').on('change', function() {
    // clear the previous search
    table.columns().every(function() {
      this.search('');
    });
    
    // apply new search
    $(':checkbox:checked').each(function() {
      console.log($(this).attr('name') + ": " + $(this).val());
      table.column($(this).attr('name')).search('Yes');
    });
    
    table.draw();
  });
} );

Viele Grüße nach Magdeburg Niklas

Esta resposta foi modificada 2 anos, 8 meses atrás por.

(@tobiasbg)

2 anos, 8 meses atrás

Olá Nicolau,

legal, parece bom!

Ao invés de usar '#example' como seletor, você precisará de algo como '#tablepress-123' lá (com 123 como o ID da tabela, basta verificar a fonte da página).

Além disso, recomendo desmarcar a caixa de seleção “Usar tabelas de dados” na tela “Editar” da tabela para evitar adulterações. Você terá total flexibilidade no carregamento e uso de DataTables.

Abraços, Tobias

(@nklsbrn)

2 anos, 8 meses atrás

Olá Tobias,

você tem muito para ajuda rápida.

Isto é o que eu já fiz. Mudei o seletor para ‘#tablepress-2’ e colei o código no campo “Comandos personalizados”. Depois disso, criei uma nova página, adicionei as caixas de seleção e o atalho à tabela.

Segue o conteúdo da página:

<input type="checkbox" name="1">Feature 1         
<input type="checkbox" name="2">Feature 2    
<input type="checkbox" name="3">Feature 3    
<input type="checkbox" name="4">Feature 4    

[table id=2 /]

Mas de alguma forma não funciona. Existe algo que eu perdi? ?
Em live.datatables funciona perfeitamente.

Abraços, Niklas

Esta resposta foi modificada 2 anos, 8 meses atrás por. Esta resposta foi modificada 2 anos, 8 meses atrás por. Esta resposta foi modificada 2 anos, 8 meses atrás por.

(@tobiasbg)

2 anos, 8 meses atrás

Olá,

Então você pode postar um link para a página com a tabela onde ocorre esse problema, para que eu possa dar uma olhada? Obrigado!

Abraços, Tobias

(@nklsbrn)

2 anos, 8 meses atrás

Olá Tobias,

Esse é o link do site. Muito obrigado!

Atenciosamente, Niklas

(@tobiasbg)

2 anos, 8 meses atrás

Olá Nicolau,

Obrigado pelo link! Parece que você inseriu esse código no campo de texto “Comandos personalizados” na tela “Editar” da tabela. Isso não vai funcionar. Você precisará colocá-lo em seu próprio HTML <script> hashtag.

Abraços, Tobias

(@nklsbrn)

2 anos, 8 meses atrás

Bom dia Tobias,

Obrigado novamente!

Ok, removi o js do campo de texto “Custom Commands” e coloquei o javascript no campo de texto do site wordpress.

De alguma forma ainda não funciona. A última maneira de colocá-lo na “tag HTML”?

O conteúdo do site é: 

<script type="text/javascript">
$(document).ready( function () {
  var table = $('#tablepress-2').DataTable();
  $(':checkbox').on('change', function() {
    // clear the previous search
    table.columns().every(function() {
      this.search('');
    });
    
    // apply new search
    $(':checkbox:checked').each(function() {
      console.log($(this).attr('name') + ": " + $(this).val());
      table.column($(this).attr('name')).search('Yes');
    });
    
    table.draw();
  });
} );
</script>
<input name="1" type="checkbox" />Feature 1
<input name="2" type="checkbox" />Feature 2
<input name="3" type="checkbox" />Feature 3
<input name="4" type="checkbox" />Feature 4
[table id=2 /]

Atenciosamente, Niklas

Esta resposta foi modificada 2 anos, 8 meses atrás por. Esta resposta foi modificada 2 anos, 8 meses atrás por. Esta resposta foi modificada 2 anos, 8 meses atrás por.

(@tobiasbg)

2 anos, 8 meses atrás

Olá Nicolau,

aqui, é importante não ter quebras de linha no JS, pois o WordPress adiciona tags HTML caso contrário. Além disso, você precisa carregar a biblioteca JS DataTables.

Então: 1) Desmarque a caixa de seleção “Usar tabelas de dados” na tela “Editar” da tabela. 2) Tente novamente:


<script type="text/javascript" src="
<script type="text/javascript">
jQuery(document).ready( function($) {
  var table = $('#tablepress-2').DataTable();
  $(':checkbox').on('change', function() {
    // clear the previous search
    table.columns().every(function() {
      this.search('');
    });
    // apply new search
    $(':checkbox:checked').each(function() {
      console.log($(this).attr('name') + ": " + $(this).val());
      table.column($(this).attr('name')).search('Yes');
    });
    table.draw();
  });
} );
</script>
<input name="1" type="checkbox" />Feature 1
<input name="2" type="checkbox" />Feature 2
<input name="3" type="checkbox" />Feature 3
<input name="4" type="checkbox" />Feature 4
[table id=2 /]

Abraços, Tobias

(@nklsbrn)

2 anos, 8 meses atrás

Olá Tobias,

Muito obrigado! Está funcionando agora!!

Uma última coisa realmente:

Agora estou tentando adicionar a configuração de tablepress acima de tabelas de dados. Não consigo descobrir como e onde adicioná-lo no html jtascript online. Este deve ser o código:

$('#tablepress-3').dataTable({"language":DataTables_language["de_DE"],"stripeClasses":["even","odd"],"ordering":false,"paging":false,"searching":false,"info":false});

Tudo de bom para Niklas

(@tobiasbg)

2 anos, 8 meses atrás

Olá,

estes devem entrar na linha

var table = $('#tablepress-2').DataTable();

do seu código, .i

var table = $('#tablepress-2').DataTable({"language":DataTables_language["de_DE"],"stripeClasses":["even","odd"],"ordering":false,"paging":false,"searching":false,"info":false});

Abraços, Tobias

(@nklsbrn)

2 anos, 8 meses atrás

Olá Tobias,

muito obrigado pela vossa ajuda. Agora eu coloco o código na linha. A formatação está correta, mas a filtragem de caixa de seleção não funciona mais. 

<script type="text/javascript" src="
<script type="text/javascript">
jQuery(document).ready( function($) {
  var table = $('#tablepress-2').DataTable({"language":DataTables_language["de_DE"],"stripeClasses":["even","odd"],"ordering":false,"paging":false,"searching":false,"info":false});
  $(':checkbox').on('change', function() {
    // clear the previous search
    table.columns().every(function() {
      this.search('');
    });
    // apply new search
    $(':checkbox:checked').each(function() {
      console.log($(this).attr('name') + ": " + $(this).val());
      table.column($(this).attr('name')).search('Yes');
    });
    table.draw();
  });
} );
</script>

(@tobiasbg)

2 anos, 8 meses atrás

Olá,

ah, temos que remover a parte do idioma, pois isso não está mais carregado. Remova o "language":DataTables_language["de_DE"], papel.

Abraços, Tobias

(@nklsbrn)

2 anos, 8 meses atrás

Olá Tobias,

a parte do idioma é removida, mas permanece a mesma. filtragem não funciona

<script type="text/javascript" src="
<script type="text/javascript">
jQuery(document).ready( function($) {
  var table = $('#tablepress-2').DataTable({"stripeClasses":["even","odd"],"ordering":false,"paging":false,"searching":false,"info":false});
  $(':checkbox').on('change', function() {
    // clear the previous search
    table.columns().every(function() {
      this.search('');
    });
    // apply new search
    $(':checkbox:checked').each(function() {
      console.log($(this).attr('name') + ": " + $(this).val());
      table.column($(this).attr('name')).search('Yes');
    });
    table.draw();
  });
} );
</script>

Sobre Nicolau

(@tobiasbg)

2 anos, 8 meses atrás

Olá,

ah, desligamos a busca…Remover também
,"searching":false

Abraços, Tobias

Isto foi útil?

0 / 0

Deixe uma resposta 0

O seu endereço de email não será publicado. Campos obrigatórios são marcados *