locked
HTML Table Pagination and Searching RRS feed

  • Question

  • User1858009984 posted

    Hi,

    I am using HTML table with runat Server and binding data from Code behind in asp.net application, so how to do pagination and Searching it.

    Wednesday, January 23, 2019 6:02 AM

Answers

  • User283571144 posted

    Hi SaiRam,

    As polachan says, we could use jquery datatable to achieve your requirement.

    More details, you could refer to below codes:

    Notice: The jquery datatable needs set the thead in the table, normally we could add it through the jquery.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TableAddData.aspx.cs" Inherits="AspNetNormalIssue.Webform.TableAddData" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css"/>
        <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
        <script>
            $(function () {
                //add the theader
                $("#bookTable").append("<thead><tr><th>Published</th><th>Title</th> <th>Author</th>  <th>Price</th> </tr></thead>");
                $("#bookTable").DataTable();
            })
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <table class="report" id="bookTable" runat="server">
              
                </table>
            </div>
        </form>
    </body>
    </html>
    

    Code-behind:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.HtmlControls;
    using System.Web.UI.WebControls;
    
    namespace AspNetNormalIssue.Webform
    {
        public partial class TableAddData : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!Page.IsPostBack)
                    BuildTable();
            }
    
            private void BuildTable()
            {
                AddRow("1","a","a","a");
                AddRow("2", "b", "b", "b");
                AddRow("3", "c", "c", "c");
            }
    
            private void AddRow(string a, string b, string c, string d)
            {
               
                HtmlTableRow row;
                HtmlTableCell cell;
                row = new HtmlTableRow();
                cell = new HtmlTableCell() { InnerText = a };
                row.Controls.Add(cell);
                cell = new HtmlTableCell() { InnerText = b };
                row.Controls.Add(cell);
                cell = new HtmlTableCell() { InnerText = c };
                row.Controls.Add(cell);
                cell = new HtmlTableCell() { InnerText = d };
                row.Controls.Add(cell);
                bookTable.Controls.Add(row);
            }
        }
    }

    Result:

    Best Regards,

    Brando

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, January 24, 2019 6:20 AM

All replies

  • User-943250815 posted

    If using HTML Table to show a list of records, better to use GridView, or if using a table to show Details try FormView. Both alreay have Paging.
    Other than you will have to do Paging and Seraching by yourself

    Wednesday, January 23, 2019 2:04 PM
  • User-1355965324 posted

    Better to use  data tables using the 

    <style rel="stylesheet"
    href="http://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"></style>

    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>

    Wednesday, January 23, 2019 8:14 PM
  • User283571144 posted

    Hi SaiRam,

    As polachan says, we could use jquery datatable to achieve your requirement.

    More details, you could refer to below codes:

    Notice: The jquery datatable needs set the thead in the table, normally we could add it through the jquery.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TableAddData.aspx.cs" Inherits="AspNetNormalIssue.Webform.TableAddData" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css"/>
        <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
        <script>
            $(function () {
                //add the theader
                $("#bookTable").append("<thead><tr><th>Published</th><th>Title</th> <th>Author</th>  <th>Price</th> </tr></thead>");
                $("#bookTable").DataTable();
            })
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <table class="report" id="bookTable" runat="server">
              
                </table>
            </div>
        </form>
    </body>
    </html>
    

    Code-behind:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.HtmlControls;
    using System.Web.UI.WebControls;
    
    namespace AspNetNormalIssue.Webform
    {
        public partial class TableAddData : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!Page.IsPostBack)
                    BuildTable();
            }
    
            private void BuildTable()
            {
                AddRow("1","a","a","a");
                AddRow("2", "b", "b", "b");
                AddRow("3", "c", "c", "c");
            }
    
            private void AddRow(string a, string b, string c, string d)
            {
               
                HtmlTableRow row;
                HtmlTableCell cell;
                row = new HtmlTableRow();
                cell = new HtmlTableCell() { InnerText = a };
                row.Controls.Add(cell);
                cell = new HtmlTableCell() { InnerText = b };
                row.Controls.Add(cell);
                cell = new HtmlTableCell() { InnerText = c };
                row.Controls.Add(cell);
                cell = new HtmlTableCell() { InnerText = d };
                row.Controls.Add(cell);
                bookTable.Controls.Add(row);
            }
        }
    }

    Result:

    Best Regards,

    Brando

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, January 24, 2019 6:20 AM
  • User-2054057000 posted

    If you are using ASP.NET MVC for your applicating then you can create your paging by using the concept given in this tutorial - Learn how to create Paging feature in ASP.NET MVC

    You can also check @Brando's answer by using the jQuery DataTables plugin. 

    Friday, January 25, 2019 11:04 AM
  • User1076988591 posted

    Hi, I agree with you.

    Wednesday, January 30, 2019 5:17 AM