Filter GridView with Javascript

Question

I have a function in Javascript that makes filters in my GridView. But, this function makes a filter by column, ie I needed an "input" per column in my GridView to filter all GridView. How I can adapt this function to one "input" for all GridView columns? I've adapted this function. Originaly, it gets values in "table" not in GrdiView, but now for this situation I don't see any solution. I'm clear?

My function:

$(function () {
$("#tabela input").keyup(function () {
    var index = $(this).parent().index();
    var nth = "#GridView1 td:nth-child(" + (index + 1).toString() + ")";
    var valor = $(this).val().toUpperCase();
    $("#GridView1 tbody tr").show();
    $(nth).each(function () {
        if ($(this).text().toUpperCase().indexOf(valor) < 0) {
            $(this).parent().hide();
        }
    });
});

$("#tabela input").blur(function () {
    $(this).val("");
});

});

My GridView:

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" GridLines="None"
            CssClass="table table-bordered table-striped">
            <Columns>
                <asp:BoundField DataField="idTickets" HeaderText="ID" />
                <asp:BoundField DataField="UserName" HeaderText="User" />
                <asp:BoundField DataField="AccessGroup" HeaderText="Access Group" />
                <asp:BoundField DataField="FolderAccess" HeaderText="Folder Access" />
                <asp:BoundField DataField="RequestDate" HeaderText="Request Date" DataFormatString="{0:d}" />
                <asp:BoundField DataField="SituationDesc" HeaderText="Situation" />
                <asp:BoundField DataField="Approver" HeaderText="Approver" />
                <asp:BoundField DataField="ApprovalDate" HeaderText="Approval Date" DataFormatString="{0:d}" />
                <asp:BoundField DataField="BusinessJustification" HeaderText="Business Justification" />
                <asp:BoundField DataField="Server" HeaderText="Server Name" />
                <asp:BoundField DataField="UserRequestor" HeaderText="User Request" />
                <asp:TemplateField Visible="false">
                    <ItemTemplate>
                        <asp:HiddenField ID="Access" runat="server" Value='<%# Bind("Access") %>' />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>

To filter 3 first columns, I needed 3 inputs:

<table id="tabela">
            <thead>
                <tr>
                    <th>
                        ID
                    </th>
                    <th>
                        USER
                    </th>
                    <th>
                        Access Group
                    </th>
                </tr>
                <tr>
                    <th>
                        <input type="text" id="txtColuna1" />
                    </th>
                    <th>
                        <input type="text" id="txtColuna2" />
                    </th>
                    <th>
                        <input type="text" id="txtColuna3" />
                    </th>
                </tr>
            </thead>
        </table>

Icarus · Accepted Answer · 2013-07-25 18:51:53Z

3

If I understand your question correctly, you are looking for something like this:

 $(function(){
    $('#tabela input').keyup(function(){
        var val = $(this).val().toUpperCase();
        $('#GridView1> tbody > tr').each(function(index , element){
            if($(this).text().toUpperCase().indexOf(val)<0)
                $(this).hide();
            else 
                $(this).show();
        });
    });
});

Essentially, it iterates through the rows in the grid looking for matches, hiding/showing the rows accordingly.

In your markup provided inside the tabela, you can simply have one text input instead of 3.

Here's a quick demo.

answered Jul 25, 2013 at 18:51

Icarus

64k14 gold badges102 silver badges116 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

CaioVJesus89 Over a year ago

Tks Icarus! But now, it's make a filter in my Header too. is there any way to ignore the header of the Grid in this filter?

Icarus Over a year ago

Yes, call this in code behind: GridView1.HeaderRow.TableSection = TableRowSection.TableHeader; that will make it render <thead> and the jasvascript function will work the way you want. Oh, forgot to mention: call that line AFTER you bind your data.

CaioVJesus89 Over a year ago

Icarus, I need more one help! Just one! How I can for this function make a refresh in my GridView? Because after user makes a filter, I don't have option to update my Grid and show all rows again. You know too if is possible make a Collapse all = false with javascript?

Icarus Over a year ago

I updated my previous fiddle to show you an example. Check it out:jsfiddle.net/Ms77U/3

CaioVJesus89 Over a year ago

Ok! It works to first time! After, when I make a new filter, it hides my header!

Howard Rothenburg · Accepted Answer · 2018-08-21 14:35:08Z

Try

    <p>Search: <input type="text" id="searchTerm" onkeyup="doSearch()" /></p>

<table id="dataTable">

<script>
function doSearch() {
            var input, filter, found, table, tr, td, i, j;
            input = document.getElementById("searchTerm");
            filter = input.value.toUpperCase();
            table = document.getElementById("dataTable");
            tr = table.getElementsByTagName("tr");
            for (i = 0; i < tr.length; i++) {
                td = tr[i].getElementsByTagName("td");
                for (j = 0; j < td.length; j++) {
                    if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
                        found = true;
                    }
                }
                if (found) {
                    tr[i].style.display = "";
                    found = false;
                } else {
                    tr[i].style.display = "none";
                }
            }
        }
    </script>

Shmn · Accepted Answer · 2020-10-25 01:08:01Z

Using Asp.net Controls here I have created sample that will help you out

function Search_Gridview(strKey) {
            var strData = strKey.value.toLowerCase().split(" ");
            var tblData = document.getElementById("<%=gvTest.ClientID %>");
            var rowData;
            for (var i = 1; i < tblData.rows.length; i++) {
                rowData = tblData.rows[i].innerHTML;
                var styleDisplay = 'none';
                for (var j = 0; j < strData.length; j++) {
                    if (rowData.toLowerCase().indexOf(strData[j]) >= 0)
                        styleDisplay = '';
                    else {
                        styleDisplay = 'none';
                        break;
                    }
                }
                tblData.rows[i].style.display = styleDisplay;
            }
        }  

 <asp:TextBox ID="txtSearch" runat="server" onkeyup="Search_Gridview(this)"></asp:TextBox>

Collectives™ on Stack Overflow

Filter GridView with Javascript

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related