Filter table data through checkbox

Question

Filter table data through checkbox

Navigation

#1 by (1 votes)

0

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 will fetch data from DB:

<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 do not understand why I'm not working. I do not quite understand what "rel= " is for. I tried to tailor the code from this font .

Whenever I load a checkbox, all data disappears. I would like someone to help me interpret the source code to figure out where to get the names that are filtered and the columns.

PS: I just need to filter the data in the Nature column.

javascript html jquery tabela jquery-datatables

asked by anonymous 10.02.2015 / 16:02

1 answer

Find entity's data for another center form vertically to center

score 1 · Accepted Answer

First, the function will hide all rows, then it will get the value of the checkbox selected, and will search for the value on all elements that have the class selected (in this case nature ), it will give%% of these 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><inputrel="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, when returning from the bank you should do the following:

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