Filter table data through checkbox

Question

I have the following 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>

I have this table that retrieves data from the comic book:

<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();
        }
    });

I still don’t understand why it’s not working for me. I don’t really understand what the "rel= ". I tried to adapt the code from this source.

Every time I hit a checkbox, all my data is gone. I would like someone to help me interpret the source code to understand where you get the names that are filtered and the columns.

PS: I only need to filter the data from the Nature column.

Answer 1

First the function will hide all lines, then it will take the value of the checkbox selected, and will search for the value in all elements that have the class selected (in your case nature), hence will give a .show() along those lines.

$("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>

In your case, in the return of the bank you should do the following:

<td class="natureza" rel="@nat.getGestaoComparativa().getNatureza().getDescricao()"> @nat.getGestaoComparativa().getNatureza().getDescricao()</td>