jQuery searches in a table

Asked

Viewed 1,413 times

0

I am rendering values in a table and I have to filter through a field that calls razao, for that I use a script, query works but when deleting the query the previous values do not come back, ie when deleting the field 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 someone help me?

jquery

2 answers

0


When deleting the value from the search field, you should remove the style display: none, so all items will return to their original state, ie 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.

  • Wow it is! Thank you so much for the help.. went unnoticed that hahahaha. Thank you even!!

0

I have this script that might suit your case.

 $('#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 the column number, I also preferred to hide the results with $(). Hide() in my view the code is cleaner.

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.