Friday, August 4, 2023

Data Table Concept

 




STEP-1

COPY DATABLE FOLDER INSIDE THE PROJECT ROOT FOLDER

STEP-2 

INCLUDE FOLLOWING LINK INSIDE THE  <HEAD> TAG

 

<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>

 

 

Body Section

<body>

    <form id="form1" runat="server">

 

 

     <div>

         <div class="card-footer bg-white">

            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"     Width="525px">

                <Columns>

                     <asp:BoundField DataField="name" HeaderText="Name" />

                     <asp:BoundField DataField="city" HeaderText="City" />

                </Columns>

            </asp:GridView>

            <br />

            <br />

  

    </div>

         </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>

 

C# 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)

        {

 

            show();

 

        }

 

 

    }

 

    protected void show()

    {

        string cs = @"Data Source=(LocalDB)\v11.0;AttachDbFilename=|DataDirectory|\college.mdf;Integrated Security=True";

        cn = new SqlConnection(cs);

        cn.Open();

 

        cm = new SqlCommand("select * from student", cn);

        DataSet ds = new DataSet();

 

        SqlDataAdapter sda = new SqlDataAdapter();

        cm.Connection = cn;

        sda.SelectCommand = cm;

        DataTable dt = new DataTable();

        sda.Fill(ds);

        GridView1.DataSource = ds.Tables[0];

        GridView1.DataBind();

 

 

 

 

    }

 

}


No comments:

Post a Comment

GRIDVIEW ON ROW DATA BOUND EVENT

 Database Create  Student : roll , name , city , cost  Fix 6 Value  in Database Record  ====================================================...