0
I have this function that filters a table, as the selected field and what was typed in the input, and works.
function myFunction2() {
var input, filter, table, tr, td, i, filtro;
input = document.getElementById("busca2");
filter = input.value.toUpperCase();
table = document.getElementById("tablepesquisa2");
tr = table.getElementsByTagName("tr");
filtro = document.getElementById("filtroPesquisa2").value;
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[filtro];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
But I have one checkbox and I wish if he had true, it filtered the product type field in the table, how can I proceed?
This is my HTML table
<div class="form-group">
<div class="col-sm-3">
<select id="filtroPesquisa2" class="form-control">
<option value="0">Código</option>
<option value="1">Descrição</option>
</select>
</div>
<div class="col-sm-7">
<input type="text" id="busca2" placeholder="Pesquisa.." onkeyup="myFunction2();" class="form-control" />
</div>
</div>
<div class="modal-body">
<div class="table-overflow col-sm-12">
<table class="table table-responsive table-hover" id="tablepesquisa2">
<thead>
<tr>
<th>Código</th>
<th>Nome</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model.Produto) {
<tr>
<td>@item.Codigo</td>
<td>@item.nome</td>
<td align="right">
<a href="#" onclick="fecha2();CarregaProduto('@item.Codigo');" title="Selecionar"><i class="fa fa-check-circle fa-lg"></i></a>
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
This is the checkbox:
<div class="col-sm-3" style="text-align:left;">
<input type="checkbox" asp-for="Produtos" onclick="checkProduto();" name="Produtos" id="Produtos"/>
<label asp-for="Produtos" class="control-label"></label>
<span asp-validation-for="Produtos" class="text-danger"></span>
</div>
<div class="col-sm-3" style="text-align:left;">
<input type="checkbox" asp-for="Servico" onclick="checkServico();" name="Servico" id="Servico"/>
<label asp-for="Servico" class="control-label"></label>
<span asp-validation-for="Servico" class="text-danger"></span>
</div>
I wanted it this way: link, but with the filters that already exist in my form, I am not able to adapt, because I did not understand very well the code.
I arrived in this function, it does not return error, but does not bring the fields according to the checkbox:
function VerificaCheck() {
var input, filter, table, tr, td, i, filtro;
input = document.getElementById("busca2");
filter = input.value.toUpperCase();
table = document.getElementById("tablepesquisa2");
tr = table.getElementsByTagName("tr");
filtro = document.getElementById("filtroPesquisa2").value;
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[filtro];
var tipoProduto = td = tr[i].getElementsByTagName("td")["tipoProduto"];
if (td) {
if (tipoProduto == $('#Produtos').prop("checked")) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
And if you add the condition
if ($('#SEUCHECK').prop("checked")) {}at the time of mounting the filter? There you can manipulate its clauses– Victor Laio
I don’t understand how to do this, how to filter later.
– Mariana
It checks directly in the column HTML and makes visible each row of your table where you have the text typed in the input as you can see in this row
if (td.innerHTML.toUpperCase().indexOf(filter) > -1). Lines that don’t have the search are invisible.– Victor Laio
Yes, until then I understood the code, and it works, but it will filter what is typed, and the checkbox too, I do not know how to implement @Victorlaio
– Mariana
Would you like to add a new column with the Product Type and filter how the other filters already work?
– Victor Laio
I would answer yes, the field is bool type.
– Mariana
@Victorlaio and if you filtered first by clicking on the checkbox, and then left this function this way, it would be easier, wouldn’t it ? I’m trying to do
– Mariana