Код Javascript для фильтрации записей gridview при нажатии кнопки

Question

У меня есть привязка сетки с данными. Я хочу отфильтровать записи при нажатии кнопки, и это потребует ввода из текстового поля, а при нажатии кнопки он будет фильтровать записи и отображать, какие записи совпадают с вводом.

Answer 1

Я думаю, это будет полезно для вас ...

ASPX Дизайн:

<asp:Button ID="btnPopulate" runat="server" Text="Populate Grid" 
    onclick="btnPopulate_Click" /><br /><br /> 
<asp:GridView ID="gvDemo" runat="server" AutoGenerateColumns="false"> 
    <Columns> 
     <asp:BoundField DataField="FirstName" HeaderText="First Name" /> 
     <asp:BoundField DataField="LastName" HeaderText="Last Name" /> 
    </Columns> 
</asp:GridView> 
<br /> 
<asp:TextBox ID="txtKeyword" runat="server" Text=""></asp:TextBox> 
<asp:Button ID="btnFilter" OnClientClick="Filter();return false;" runat="server" Text="Filter" /> 

JavaScript код:

<script type="text/javascript"> 
 

 
    function Filter() { 
 
     var txtKeyword = document.getElementById('<%= txtKeyword.ClientID %>');   
 
     var tblGrid = document.getElementById('<%= gvDemo.ClientID %>');   
 
     var rows = tblGrid.rows; 
 
     var i = 0, row, cell ; 
 
     for (i = 1; i < rows.length; i++) { 
 
      row = rows[i]; 
 
      var found = false; 
 
      for (var j = 0; j < row.cells.length; j++) { 
 
       cell = row.cells[j]; 
 
       if (cell.innerHTML.toUpperCase().indexOf(txtKeyword.value.toUpperCase()) >= 0) { 
 
        found = true; 
 
        break; 
 
       } 
 
      } 
 
      if (!found) { 
 
       row.style['display'] = 'none'; 
 

 
      } 
 
      else { 
 
       row.style.display = ''; 
 
      } 
 
     } 
 

 
     return false; 
 
    } 
 

 
</script>

C# Код:

protected void Page_Load(object sender, EventArgs e) 
{ 

} 
protected void btnPopulate_Click(object sender, EventArgs e) 
{ 
    DataTable dtEmployee = PopulateDataTable(); 
    gvDemo.DataSource = dtEmployee; 
    gvDemo.DataBind(); 
} 
protected DataTable PopulateDataTable() 
{ 
    //here is logic to populate your data table 
    //I'm using dummy data 
    DataTable dt = new DataTable(); 
    dt.Columns.Add(new DataColumn("FirstName", typeof(string))); 
    dt.Columns.Add(new DataColumn("LastName", typeof(string))); 

    dt.Rows.Add(dt.NewRow()); 
    dt.Rows.Add(dt.NewRow()); 
    dt.Rows.Add(dt.NewRow()); 
    dt.Rows.Add(dt.NewRow()); 
    dt.Rows.Add(dt.NewRow()); 
    dt.Rows.Add(dt.NewRow()); 
    dt.Rows.Add(dt.NewRow()); 
    dt.Rows.Add(dt.NewRow()); 

    dt.Rows[0]["FirstName"] = "Sangram"; 
    dt.Rows[0]["LastName"] = "Patil"; 

    dt.Rows[1]["FirstName"] = "Prasad"; 
    dt.Rows[1]["LastName"] = "Patil"; 

    dt.Rows[2]["FirstName"] = "Girish"; 
    dt.Rows[2]["LastName"] = "Mane"; 

    dt.Rows[3]["FirstName"] = "Kedar"; 
    dt.Rows[3]["LastName"] = "Torase"; 

    dt.Rows[4]["FirstName"] = "Nandu"; 
    dt.Rows[4]["LastName"] = "Desai"; 

    dt.Rows[5]["FirstName"] = "Promod"; 
    dt.Rows[5]["LastName"] = "Mandavkar"; 

    dt.Rows[6]["FirstName"] = "Kiran"; 
    dt.Rows[6]["LastName"] = "More"; 

    dt.Rows[7]["FirstName"] = "Vaibhav"; 
    dt.Rows[7]["LastName"] = "Telang"; 

    return dt; 
}