CODEWITHSUNDEEP
c#jqueryasp.netdatatables
Jobin Joseph
Jobin Joseph

Reputation: 123

What is the best way achieving JQuery DataTable in ASP and C#

Screenshot

I Have a design like the screenshot uploaded, I need to fill the data from database and don't want to loose the filtering pagination and the search options provided by the JQuery datatable. Can anyone share some usful code or code links to make this happen? I tried using gridview and Listview without much success.

Upvotes: 0

Views: 1496

Answers (2)

user3231262
user3231262

Reputation: 7

use asp grid view....use pagination property for filtering you have to find some way how to do pagination : go to gridview properties

Upvotes: 1

Jobin Joseph
Jobin Joseph

Reputation: 123

I have tried using the below code and achieved something like the screenshot given, more tips expecting Output

            <script  type="text/javascript" language="javascript" src="Scripts/jquery-1.10.2.js"></script>
            <script type="text/javascript" language="javascript" src="Scripts/jquery.datatables.min.js"></script>
            <link type="text/css" href="Content/jquery.dataTables.min.css" rel="stylesheet" />
            ................
            <div class="row">
                 <div class="col-md-4">

                      <asp:GridView ID="GridView1" runat="server" CssClass="gvdatatable" AutoGenerateColumns="true" OnPreRender="GridView1_PreRender">
                      </asp:GridView>
                 </div>
            </div>

            <script type="text/javascript">
                 $(document).ready(function () {
                       $('.gvdatatable').dataTable({});
                 });
            </script>

C# Code..

            protected void GridView1_PreRender(object sender, EventArgs e)
            {
            string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
            using (SqlConnection con = new SqlConnection(constr))
            {
            using (SqlCommand cmd = new SqlCommand())
            {
            cmd.CommandText = "SELECT [OrderNo],[Name],[Email],[Date],[Amount],[Status] FROM dbo.tbl_Orders";
            cmd.Connection = con;
            using (SqlDataAdapter sda = new SqlDataAdapter(cmd))
            {
            DataTable dt = new DataTable();
            sda.Fill(dt);
            GridView1.DataSource = dt;
            GridView1.DataBind();

            if (GridView1.Rows.Count > 0)
            {
            //Replace the <td> with <th> and adds the scope attribute
            GridView1.UseAccessibleHeader = true;

            //Adds the <thead> and <tbody> elements required for DataTables to work
            GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;

            //Adds the <tfoot> element required for DataTables to work
            GridView1.FooterRow.TableSection = TableRowSection.TableFooter;
            //GridView1.DataSource = GetData();  //GetData is your method that you will use to obtain the data you're populating the GridView with
            }
            }
            }
            }
            }

Upvotes: 0

Related Questions