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.