Filter jquery list with checkbox

0

I have this function that does the filtering of a table, according to the selected field selected and what was typed in the input, and it 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 a checkbox and I wanted it to have as true , it would filter the product type field in the table, how can I proceed? Here is the HTML of my 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>&nbsp;
          </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 on my form, I can not adapt , because I did not quite understand the code.

I got this function, it does not return an error, but it does not return 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";
                }
            }
        }
    }
    
asked by anonymous 16.10.2018 / 14:18

1 answer

1

You should first add an input to your lines to pull this value directly into the filter containing the value of your Product Type (within your for / p>

@foreach (var item in Model.Produto) {
    <tr>
      <input type="hidden" id="tipoProduto" value="@item.TipoProduto" />
      <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>&nbsp;
      </td>
    </tr>
}

Then just modify your myFunction2 () search method:

  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[filtro];
    tipoProduto = tr[i].getElementsByTagName("input")[0].value;
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1 && tipoProduto == $('#Produtos').prop("checked")) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }

The rationale is more or less this, you may have to make some changes to fit your code and your need. But the idea was passed.

I hope that helps you, any questions are available.

    
16.10.2018 / 15:19