jQuery search in a table

Question

jQuery search in a table

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I am rendering values in a table and I have to filter by a field that calls reason, for that I use a script , the query works, but when deleting the query, the previous values do not return, that is, by deleting the search field the search still persists.

HTML search:

<input type="text" value="" class="form-control pesquisa" style="max-width:200px" />

Js:

 $(".pesquisa").keyup(function () {
                var texto = $(this).val();
                $(".lista").css("display", "grid");
                $(".lista").each(function () {
                    if ($(this).find(".razao").text().toUpperCase().indexOf(texto.toUpperCase()) < 0) {
                        $(this).css("display", "none");
                    }
                })
            })

HTML list:

 @if (Model != null)
                {
                    foreach (var item in Model)
                    {
                        <tr class="lista" data-codigo="@item.codigo" data-razao="@item.razao">
                            <td class="col-sm-2 codigo" ><span>
                                @Html.DisplayFor(modelItem => item.codigo)</span>
                            </td>
                            <td class="col-sm-4 razao">
                                @Html.DisplayFor(modelItem => item.razao)
                            </td>
                            <td class="col-sm-2">
                                @Html.DisplayFor(modelItem => item.cidade)
                            </td>
                            <td class="col-sm-2">
                                @Html.DisplayFor(modelItem => item.estado)
                            </td>
                            <td class="col-sm-2">
                                @Html.DisplayFor(modelItem => item.telefone)
                            </td>
                        </tr>
                    }
                }

Can anyone help me?

jquery

asked by anonymous 22.11.2016 / 18:09

2 answers

0

I have this script that can serve you.

 $('#tblSegundoNivel_linha1 tbody').find('tr').each(function (indexTr, valueTr) {
            $(this).find('td').each(function (indexTd, valueTd) {
                if (indexTd === 5) {
                    if ($(valueTd).html().indexOf(b) === -1) {
                        $(valueTd).parent().hide();
                    } else {
                        $(valueTd).parent().show();
                    }
                }
            });
        });

The search is done by column number, I also preferred to hide the results with $ (). hide () In my view the code gets cleaner.

22.11.2016 / 18:34

Questions about redirection with location.replace Is there any tool to help organize multiple click events?

score 0 · Accepted Answer

When you clear the search field value, you must remove the display: none style, so all items will return to their original state, ie they will appear again.

The way your function is, it just hides the results that are not compatible with the value of the search field and does not do the opposite, which is to show.