*****IMP DATA TABLE******
1.it used to searchable gridview
2.it is pre defined library
step 1:-save data table in project folder
step 2:-include following css inside the page
step 3:-inclue the script in web page after the </form>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="datatables/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
<link type="text/css" rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<script src="datatables/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js" type="text/javascript" charset="utf8"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js" type="text/javascript" charset="utf8"></script>
</head>
************after </form>***********
<script type="text/javascript">
$(document).ready(function () {
$('#<%= GridView1.ClientID%>').prepend($("<thead></thead>").append($("#<%= GridView1.ClientID%>").find("tr:first"))).DataTable({
stateSave: true,
});
});
</script>
Example:-
CODE:-
source code:-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Dtable.aspx.cs" Inherits="Dtable" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="datatables/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
<link type="text/css" rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<script src="datatables/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js" type="text/javascript" charset="utf8"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js" type="text/javascript" charset="utf8"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
Height="183px" Width="613px">
<Columns>
<asp:BoundField DataField="id" HeaderText="ID" />
<asp:BoundField DataField="name" HeaderText="NAME" />
<asp:BoundField DataField="mobile" HeaderText="MOBILE" />
<asp:BoundField DataField="cost" HeaderText="COST" />
<asp:BoundField DataField="pic" HeaderText="Image" />
</Columns>
</asp:GridView>
<br />
<br />
</div>
</form>
<script type="text/javascript">
$(document).ready(function () {
$('#<%= GridView1.ClientID%>').prepend($("<thead></thead>").append($("#<%= GridView1.ClientID%>").find("tr:first"))).DataTable({
stateSave: true,
});
});
</script>
</body>
</html>
ASPX CODE:-
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;
public partial class Dtable : System.Web.UI.Page
{
SqlConnection cn;
SqlCommand cm;
SqlDataReader dr;
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
display();
}
}
protected void display()
{
string location = @"Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\college.mdf;Integrated Security=True;User Instance=True";
cn = new SqlConnection(location);
cn.Open();
string k = "select * from testdb";
SqlDataAdapter adp = new SqlDataAdapter(k, cn);
DataSet ds = new DataSet();
adp.Fill(ds);
GridView1.DataSource = ds.Tables[0];
GridView1.DataBind();
}
}
OUTPUT
Comments
Post a Comment