1

Tenho as seguintes checkboxes:

  <div class="row smart-form">
      <section class="col col-1.5">
        <label class="toggle">
         <input type="checkbox" name="checkbox-toggle" rel="Natureza" value="Produtos">
         <i data-swchon-text="ON" data-swchoff-text="OFF"></i>
        Produtos</label>
       </section>
      <section class="col col-1.5">
        <label class="toggle">
         <input type="checkbox" name="checkbox-toggle" rel="Natureza" value="Produtos Auto-Utilizados">
         <i data-swchon-text="ON" data-swchoff-text="OFF"></i>
 Produtos Auto-Utilizados</label>
      </section>
    </div>

Tenho esta tabela que vai buscar dados à BD:

<table id="datatable_fixed_column" class="table table-striped table-bordered" width="100%">
 <thead>
  <tr class="first">
   <th>Código</th>
   <th>Nome</th>
   <th>Descrição</th>
   <th>Designação Comercial</th>
   <th>Unidades</th>
   <th>IVA %</th>
   <th>Stock</th>
   <th>Natureza</th>
  </tr>
 </thead>

   <tbody>
       @for(art <- artigos) {
        <tr>
          <td>@art.getId()</td>
          <td>@art.getNome()</td>
          <td>@art.getDescricao()</td>
          <td>@art.getDesignacaoComercial()</td>   
          <td>@art.getIva().getValor()</td>
          <td>@art.getStockAtual()</td>
       @for(nat <- art.getDesignacoes()) {
        <td> @nat.getGestaoComparativa().getNatureza().getDescricao()</td>
         }
      </tr>
 }

</tbody>

</table>

JavaScript

$("input:checkbox").click(function () {

       var showAll = true;
        $('tr').not('.first').hide();
        $('input[type=checkbox]').each(function () {
            if ($(this)[0].checked) {
                showAll = false;
                var status = $(this).attr('rel');
                console.log("STATUS: " + status);
                var value = $(this).val();
                console.log("VALUE: " + value);
                $('td.' + status + '[rel="' + value + '"]').parent('tr').show();
            }
        });
        if(showAll){
            $('tr').show();
        }
    });

Ainda não percebi bem o porquê de não me estar a funcionar. Não percebo bem para que serve o "rel= ". Tentei adaptar o código a partir desta fonte.

Sempre que carrego numa checkbox desaparecem-me todos os dados. Gostava que alguém me ajudasse a interpretar o código fonte para perceber onde vai buscar os nomes que são filtrados e as colunas.

PS: Só necessito de filtrar os dados da coluna Natureza.

1 Resposta 1

1

Primeiramente a função irá esconder todas as linhas, depois irá pegar o valor do checkbox selecionado, e irá procurar pelo valor em todos elementos que tiverem a class selecionada (no seu caso natureza), dai dará um .show() nessas linhas.

$("input:checkbox").click(function () {
    var showAll = true;
    $('tr').not('.first').hide();
    $('input[type=checkbox]').each(function () {
        if ($(this)[0].checked) {
            showAll = false;
            var status = $(this).attr('rel');
            var value = $(this).val();            
            $('td.' + status + '[rel="' + value + '"]').parent('tr').show();
        }
    });
    if(showAll){
        $('tr').show();
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input rel="natureza" type="checkbox" value="Produtos">Produtos
<input rel="natureza" type="checkbox" value="Auto">AutoUtilizados
<br/><br/><br/>

<table>
    <caption>Tabela</caption>
    <thead>
        <tr class="first">
            <th>Product Number</th>
            <th>Status</th>
            <th>Capacity</th>
            <th>Speed</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Memory1</td>
            <td>Shipping</td>
            <td>1GB</td>
            <td class="natureza" rel="Auto">AutoUtilizados</td>
        </tr>
        <tr>
            <td>Memory2</td>
            <td>Discontinued</td>
            <td>2GB</td>
            <td class="natureza" rel="Produtos">Produtos</td>
        </tr>
        <tr>
            <td>Memory3</td>
            <td>Shipping</td>
            <td>2GB</td>
            <td class="natureza" rel="Auto">AutoUtilizados</td>
        </tr>
        <tr>
            <td>Memory4</td>
            <td>Discontinued</td>
            <td>4GB</td>
            <td class="natureza" rel="Auto">AutoUtilizados</td>
        </tr>
        <tr>
            <td>Memory5</td>
            <td>Shipping</td>
            <td>4GB</td>
            <td class="natureza" rel="Produtos">Produtos</td>
        </tr>
    </tbody>

No seu caso, no retorno do banco você deverá fazer o seguinte:

<td class="natureza" rel="@nat.getGestaoComparativa().getNatureza().getDescricao()"> @nat.getGestaoComparativa().getNatureza().getDescricao()</td>
5
  • Este import: <script src="ajax.googleapis.com/ajax/libs/jquery/1.9.1/…> é necessário? É que com esse import, ao correr a página aparecem estes erros ou warnings: Uncaught TypeError: Cannot read property 'on' of undefined app.min.js:1 Uncaught TypeError: undefined is not a function Commented 10/02/2015 às 15:26
  • Sim @HugoMachado, essa é uma função JQuery, basta ter a biblioteca JQuery instanciada em seu projeto. Commented 10/02/2015 às 15:30
  • Desde já agradeço a sua ajuda, foi bastante explícito. Só que o import da biblioteca JQuery parece que atrapalha o trabalho. primeiro altera-me o design da tabela que eu tenho, e aparecem esses warnings que lhe mostrei no comentário anterior, e ao clicar nas checkboxes não faz nada, sem esse importe, pelo menos ao clicar nas checkboxes desapareciam os dados e apareciam. Commented 10/02/2015 às 15:33
  • Então, primeiro que nas suas checkBox você deve colocar o seguinte: rel="natureza" value="valorDaPesquisa" e rel="valorDaPesquisa" value="Auto". Segundo, essa função que você passou como exemplo é nativa do JQuery, sem a biblioteca, não tem como a função funcionar ;/ Commented 10/02/2015 às 15:39
  • Já está a funcionar, o "value" que coloquei é que diferia do que era apresentado na tabela, daí estar semrpe a deseparecer. Muito Obrigado @Marcelo Bonifazio ! Commented 10/02/2015 às 15:41

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .