0
Answer

How to search data bind gridview jquery datatable

Nirmal KumarC

Nirmal KumarC
5y
980
1
Hi,
 
Textbox wise search database data bind gridview using jquery datatable plugin but data bind with header also bind gridview,so avoid Header in gridview row
 
Jquery Script:
  1. <%--animated Zoom In--%>  
  2. <%--for gridview search,sort,paging--%>  
  3. <link type="text/css" href="Design/css/dataTables.bootstrap.min.css" rel="stylesheet" />  
  4. <link type="text/css" href="Design/css/responsive.bootstrap.min.css" rel="stylesheet" />  
  5. <script type="text/jscript" src="Design/js/jquery.dataTables.min.js"></script>  
  6. <script type="text/javascript" src="Design/js/dataTables.bootstrap.min.js"></script>  
  7. <script type="text/javascript" src="Design/js/dataTables.responsive.min.js"></script>  
  8. <%--for gridview search,sort,paging--%>  
  9. <link href="Design/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet" />  
  10. <script type="text/javascript">  
  11. $(function () {  
  12. $('#<%= gvCustomers.ClientID %>').prepend($("<thead></thead>").append($('[id$=gvCustomers]').find("tr:first"))).DataTable({  
  13. "responsive": true,  
  14. "destroy" : true,  
  15. "sPaginationType": "full_numbers",  
  16. fixedHeader: {  
  17. header: false,  
  18. footer: false  
  19. }  
  20. });  
  21. });  
  22. </script>  
  23. <div>  
  24. <asp:TextBox runat="server" ID="txtCountry" />  
  25. <asp:Button ID="btnSearch" Text="Search" runat="server" />  
  26. <br />  
  27. <div class="table-responsive">  
  28. <div class="table-wrapper">  
  29. <asp:GridView ID="gvCustomers" CssClass="table table-striped table-bordered table-hover" runat="server" AutoGenerateColumns="false">  
  30. <Columns>  
  31. <asp:BoundField DataField="ContactName" HeaderText="Contact Name" />  
  32. <asp:BoundField DataField="CustomerID" HeaderText="CustomerID" />  
  33. <asp:BoundField DataField="City" HeaderText="City" />  
  34. <asp:BoundField DataField="Country" HeaderText="Country" />  
  35. </Columns>  
  36. </asp:GridView>  
  37. </div>  
  38. </div>  
  39. </div>  
Code:
  1. private void BindGridView()  
  2. {  
  3. string strConnString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;  
  4. using (SqlConnection con = new SqlConnection(strConnString))  
  5. {  
  6. SqlCommand cmd = new SqlCommand("SELECT ContactName,CustomerId,City,CompanyName [Country] FROM Customers", con);  
  7. using (SqlDataAdapter sda = new SqlDataAdapter(cmd))  
  8. {  
  9. using (DataSet ds = new DataSet())  
  10. {  
  11. sda.Fill(ds, "Customers");  
  12. gvCustomers.DataSource = ds;  
  13. gvCustomers.DataBind();  
  14. }  
  15. }  
  16. }  
  17. }  
  18. [System.Web.Services.WebMethod]  
  19. public static string GetCustomers(string searchTerm)  
  20. {  
  21. DataSet ds = new DataSet();  
  22. string strConnString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;  
  23. SqlConnection con = new SqlConnection(strConnString);  
  24. string query = "SELECT ContactName,CustomerId,City, CompanyName [Country] FROM Customers";  
  25. if (!string.IsNullOrEmpty(searchTerm))  
  26. {  
  27. query += " WHERE CompanyName LIKE '" + searchTerm + "%'";  
  28. }  
  29. SqlCommand cmd = new SqlCommand(query, con);  
  30. cmd.CommandType = CommandType.Text;  
  31. SqlDataAdapter sda = new SqlDataAdapter(cmd);  
  32. sda.Fill(ds, "Customers");  
  33. return ds.GetXml();  
  34. }  

Attachment: AvoidMultiplegrid.rar

Next Recommended Forum