在ASP.NET中，如何只包含一列以使用Javascript从gridview进行搜索？

Question

I got a function from google for client side searching from grid using textbox

and the function is :

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
        function filter2(phrase, _id) {
            var words = phrase.value.toLowerCase().split(" ");
            var table = document.getElementById(_id);
            var ele;
            for (var r = 1; r < table.rows.length; r++) {
                ele = table.rows[r].innerHTML.replace(/<[^>]+>/g, "");
                var displayStyle = 'none';
                for (var i = 0; i < words.length; i++) {
                    if (ele.toLowerCase().indexOf(words[i]) >= 0)
                        displayStyle = '';
                    else {
                        displayStyle = 'none';
                        break;
                    }
                }
                table.rows[r].style.display = displayStyle;
            }
        }

    </script> 

and calling from textbox is as:

<asp:TextBox ID="txtSearch" TabIndex="2"  onkeyup="filter2(this, '<%=GridView1.ClientID %>');" runat="server"  AutoPostBack="True"/>

and the Gridview I used for searching is as:

 <asp:GridView ID="GridView1"  runat="server"  AutoGenerateColumns="False"    >
                                            <Columns>
<asp:BoundField DataField="ClassName" HeaderText="Class Name" />
<asp:BoundField DataField="PerWeekClass" HeaderText="Week Classes" />
<asp:BoundField DataField="SubID" visible="false" />
                                            </Columns>
                                           </asp:GridView>

the issue I got is this function searches string from all the columns of the grid but,

I need only first column that should function search string from.

I am weak in java script so I need your help to solve this issue.

Thanks in advance.

Answer 1

Here is the code where you can try...

.aspx

    <asp:TextBox ID="txt" runat="server" onkeyup="filter(this);"></asp:TextBox>

    <br />

    <asp:GridView ID="gv" runat="server" Width="100%" AutoGenerateColumns="false">
        <Columns>
            <asp:BoundField DataField="Filter" />
            <asp:BoundField DataField="Name" />
        </Columns>

    </asp:GridView>

Javascript

function filter(txt) {
        var grid = document.getElementById("<%=gv.ClientID %>");
        var row = grid.rows.length;
        var filterValue = txt.value.toLowerCase();
        var splitter = filterValue.split(' ');
        var display = '';
        var currentRowValue = '';

        for (var i = 1; i < row; i++) {
            display = 'none';
            currentRowValue = grid.rows[i].cells[0].innerText;

            for (var j = 0; j < splitter.length; j++) {
                if (currentRowValue.toLowerCase().startsWith(splitter[j]))
                    display = '';
                else {
                    display = 'none';
                    break;
                }
            }
            grid.rows[i].style.display = display;
        }
    }

Code Behind

protected void Page_Load(object sender, EventArgs e)
{
    // Check
    if (!IsPostBack)
    {
        // Varaible
        DataTable dt = new DataTable();
        dt.Columns.Add("Filter");
        dt.Columns.Add("Name");

        // Add
        dt.Rows.Add("Do", "Doraemon");
        dt.Rows.Add("No", "Nobita");
        dt.Rows.Add("Si", "Sizuka");
        dt.Rows.Add("Sin", "Sinyu");

        // Bind
        gv.DataSource = dt;
        gv.DataBind();
    }
}

Answer 2

Change

ele = table.rows[r].innerHTML.replace(/<[^>]+>/g, "");

To

ele = table.rows[r].cells[0].innerHTML.replace(/<[^>]+>/g, "");