Jquery in ASP.NET content page not working but working fine in webform page

Question

1.00/5 (1 vote)

See more:

i want to use jquery in asp.net but i couldnt use it in contect page form but i couold use it in normal webpage form

this is the content page code:

CSS

<pre><%@ Page Title="" Language="C#" MasterPageFile="~/MainMaster.Master" AutoEventWireup="true" CodeBehind="daily.aspx.cs" Inherits="WebApplication1.daily" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">


                  <!-- Bootstrap core JavaScript-->
    <script src="vendor/jquery/jquery.min.js"></script>
    <link href="vendor/datatables/dataTables.bootstrap4.min.css" rel="stylesheet" />
    <script src="vendor/datatables/jquery.dataTables.min.js"></script>

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


 
    <div>
        <asp:GridView  ID="GridView2" runat="server" CssClass="mygrid" OnSelectedIndexChanged="GridView1_SelectedIndexChanged">
    <Columns>
        <asp:CommandField ButtonType="Button" ShowSelectButton="True" ControlStyle-CssClass ="btn btn-primary btn-sm"/>
    </Columns>
        </asp:GridView>

    </div>
  
    
</asp:Content>

and this is the master page code

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="MainMaster.master.cs" Inherits="WebApplication1.MainMaster" %>

<!DOCTYPE html>

<html>
<head runat="server">

     

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>SB Admin 2 - Dashboard</title>

    <!-- Custom fonts for this template-->
    <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
    <link
        href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
        rel="stylesheet">

    <!-- Custom styles for this template-->
    <link href="css/sb-admin-2.min.css" rel="stylesheet">
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>


</head>
<body id="page-top">
    <form id="form1" runat="server">


  

        <div id="wrapper">
            <!-- Sidebar -->
        <ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">

            <!-- Sidebar - Brand -->
            <a class="sidebar-brand d-flex align-items-center justify-content-center" href="index.html">
                <div class="sidebar-brand-icon rotate-n-15">
                    class="fas fa-laugh-wink" href="index.html"__^
                    <span>Dashboard</span></a>
            </li>

            <!-- Divider -->
            <hr class="sidebar-divider">

            <!-- Heading -->
            <div class="sidebar-heading">
                Interface
            </div>

            <!-- Nav Item - Pages Collapse Menu -->
            <li class="nav-item">
                <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseTwo"
                    aria-expanded="true" aria-controls="collapseTwo">
                    ^__i class="fas fa-fw fa-cog"__^</i__^
                    <span>Components</span>
                </a>
                <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar">
                    <div class="bg-white py-2 collapse-inner rounded">
                        <h6 class="collapse-header">Custom Components:</h6>
                        <a class="collapse-item" href="buttons.html">Buttons</a>
                        <a class="collapse-item" href="cards.html">Cards</a>
                    </div>
                </div>
            </li>

            <!-- Nav Item - Utilities Collapse Menu -->
            <li class="nav-item">
                <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseUtilities"
                    aria-expanded="true" aria-controls="collapseUtilities">
                    ^__i class="fas fa-fw fa-desktop"__^
                    <span>Front Office</span>
                </a>
                <div id="collapseUtilities" class="collapse" aria-labelledby="headingUtilities"
                    data-parent="#accordionSidebar">
                    <div class="bg-white py-2 collapse-inner rounded">
                        <h6 class="collapse-header">Custom Utilities:</h6>
                        <a class="collapse-item" href="daily.aspx">Daily</a>
                        <a class="collapse-item" href="WebForm1.aspx">test</a>
                        <a class="collapse-item" href="utilities-animation.html">Animations</a>
                        <a class="collapse-item" href="utilities-other.html">Other</a>
                    </div>
                </div>
            </li>

            <!-- Divider -->
            <hr class="sidebar-divider">

            <!-- Heading -->
            <div class="sidebar-heading">
                Addons
            </div>

            <!-- Nav Item - Pages Collapse Menu -->
            <li class="nav-item">
                <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapsePages"
                    aria-expanded="true" aria-controls="collapsePages">
                    ^__i class="fas fa-fw fa-folder"__^
                    <span>Pages</span>
                </a>
                <div id="collapsePages" class="collapse" aria-labelledby="headingPages" data-parent="#accordionSidebar">
                    <div class="bg-white py-2 collapse-inner rounded">
                        <h6 class="collapse-header">Login Screens:</h6>
                        <a class="collapse-item" href="login.html">Login</a>
                        <a class="collapse-item" href="register.html">Register</a>
                        <a class="collapse-item" href="forgot-password.html">Forgot Password</a>
                        <div class="collapse-divider"></div>
                        <h6 class="collapse-header">Other Pages:</h6>
                        <a class="collapse-item" href="404.html">404 Page</a>
                        <a class="collapse-item" href="blank.html">Blank Page</a>
                    </div>
                </div>
            </li>

            <!-- Nav Item - Charts -->
            <li class="nav-item">
                <a class="nav-link" href="charts.html">
                    ^__i class="fas fa-fw fa-chart-area"__^
                    <span>Charts</span></a>
            </li>

            <!-- Nav Item - Tables -->
            <li class="nav-item">
                <a class="nav-link" href="tables.html">
                    ^__i class="fas fa-fw fa-table"__^
                    <span>Tables</span></a>
            </li>

            <!-- Divider -->
            <hr class="sidebar-divider d-none d-md-block">

            <!-- Sidebar Toggler (Sidebar) -->
            <div class="text-center d-none d-md-inline">
                <button class="rounded-circle border-0" id="sidebarToggle" type="button"></button>
            </div>

            <!-- Sidebar Message -->
            <div class="sidebar-card">
                <img class="sidebar-card-illustration mb-2" src="img/undraw_rocket.svg" alt="">
                <p class="text-center mb-2">^__strong__^SB Admin Pro is packed with premium features, components, and more!</p>
                <a class="btn btn-success btn-sm" href="https://startbootstrap.com/theme/sb-admin-pro">Upgrade to Pro!</a>
            </div>

        </ul>
        <!-- End of Sidebar -->

         <!-- Content Wrapper -->
        <div id="content-wrapper" class="d-flex flex-column">

            <!-- Main Content -->
            <div id="content" runat="server">

                <!-- Topbar -->
                <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">

                    <!-- Sidebar Toggle (Topbar) -->
                    <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
                        ^__i class="fa fa-bars"__^
                    </button>

                    <!-- Topbar Search -->
                    <div
                        class="d-none d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search">
                        <div class="input-group">
                            <input type="text" class="form-control bg-light border-0 small" placeholder="Search for..."
                                aria-label="Search" aria-describedby="basic-addon2">
                            <div class="input-group-append">
                                <button class="btn btn-primary" type="button">
                                    ^__i class="fas fa-search fa-sm"__^
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Topbar Navbar -->
                    <ul class="navbar-nav ml-auto">

                        <!-- Nav Item - Search Dropdown (Visible Only XS) -->
                        <li class="nav-item dropdown no-arrow d-sm-none">
                            <a class="nav-link dropdown-toggle" href="#" id="searchDropdown" role="button"
                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                ^__i class="fas fa-search fa-fw"__^
                            </a>
                            <!-- Dropdown - Messages -->
                            <div class="dropdown-menu dropdown-menu-right p-3 shadow animated--grow-in"
                                aria-labelledby="searchDropdown">
                                <div class="form-inline mr-auto w-100 navbar-search">
                                    <div class="input-group">
                                        <input type="text" class="form-control bg-light border-0 small"
                                            placeholder="Search for..." aria-label="Search"
                                            aria-describedby="basic-addon2">
                                        <div class="input-group-append">
                                            <button class="btn btn-primary" type="button">
                                                ^__i class="fas fa-search fa-sm"__^
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>

                        <!-- Nav Item - Alerts -->
                        <li class="nav-item dropdown no-arrow mx-1">
                            <a class="nav-link dropdown-toggle" href="#" id="alertsDropdown" role="button"
                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                ^__i class="fas fa-bell fa-fw"__^
                                <!-- Counter - Alerts -->
                                3+
                            </a>
                            <!-- Dropdown - Alerts -->
                            <div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in"
                                aria-labelledby="alertsDropdown">
                                <h6 class="dropdown-header">
                                    Alerts Center
                                </h6>
                                <a class="dropdown-item d-flex align-items-center" href="#">
                                    <div class="mr-3">
                                        <div class="icon-circle bg-primary">
                                            ^__i class="fas fa-file-alt text-white"__^
                                        </div>
                                    </div>
                                    <div>
                                        <div class="small text-gray-500">December 12, 2019</div>
                                        A new monthly report is ready to download!
                                    </div>
                                </a>
                                <a class="dropdown-item d-flex align-items-center" href="#">
                                    <div class="mr-3">
                                        <div class="icon-circle bg-success">
                                            ^__i class="fas fa-donate text-white"__^
                                        </div>
                                    </div>
                                    <div>
                                        <div class="small text-gray-500">December 7, 2019</div>
                                        $290.29 has been deposited into your account!
                                    </div>
                                </a>
                                <a class="dropdown-item d-flex align-items-center" href="#">
                                    <div class="mr-3">
                                        <div class="icon-circle bg-warning">
                                            ^__i class="fas fa-exclamation-triangle text-white"__^
                                        </div>
                                    </div>
                                    <div>
                                        <div class="small text-gray-500">December 2, 2019</div>
                                        Spending Alert: We've noticed unusually high spending for your account.
                                    </div>
                                </a>
                                <a class="dropdown-item text-center small text-gray-500" href="#">Show All Alerts</a>
                            </div>
                        </li>

                        <!-- Nav Item - Messages -->
                        <li class="nav-item dropdown no-arrow mx-1">
                            <a class="nav-link dropdown-toggle" href="#" id="messagesDropdown" role="button"
                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                ^__i class="fas fa-envelope fa-fw"__^
                                <!-- Counter - Messages -->
                                7
                            </a>
                            <!-- Dropdown - Messages -->
                            <div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in"
                                aria-labelledby="messagesDropdown">
                                <h6 class="dropdown-header">
                                    Message Center
                                </h6>
                                <a class="dropdown-item d-flex align-items-center" href="#">
                                    <div class="dropdown-list-image mr-3">
                                        <img class="rounded-circle" src="img/undraw_profile_1.svg"
                                            alt="">
                                        <div class="status-indicator bg-success"></div>
                                    </div>
                                    <div class="font-weight-bold">
                                        <div class="text-truncate">Hi there! I am wondering if you can help me with a
                                            problem I've been having.</div>
                                        <div class="small text-gray-500">Emily Fowler · 58m</div>
                                    </div>
                                </a>
                                <a class="dropdown-item d-flex align-items-center" href="#">
                                    <div class="dropdown-list-image mr-3">
                                        <img class="rounded-circle" src="img/undraw_profile_2.svg"
                                            alt="">
                                        <div class="status-indicator"></div>
                                    </div>
                                    <div>
                                        <div class="text-truncate">I have the photos that you ordered last month, how
                                            would you like them sent to you?</div>
                                        <div class="small text-gray-500">Jae Chun · 1d</div>
                                    </div>
                                </a>
                                <a class="dropdown-item d-flex align-items-center" href="#">
                                    <div class="dropdown-list-image mr-3">
                                        <img class="rounded-circle" src="img/undraw_profile_3.svg"
                                            alt="">
                                        <div class="status-indicator bg-warning"></div>
                                    </div>
                                    <div>
                                        <div class="text-truncate">Last month's report looks great, I am very happy with
                                            the progress so far, keep up the good work!</div>
                                        <div class="small text-gray-500">Morgan Alvarez · 2d</div>
                                    </div>
                                </a>
                                <a class="dropdown-item d-flex align-items-center" href="#">
                                    <div class="dropdown-list-image mr-3">
                                        <img class="rounded-circle" src="https://source.unsplash.com/Mv9hjnEUHR4/60x60"
                                            alt="">
                                        <div class="status-indicator bg-success"></div>
                                    </div>
                                    <div>
                                        <div class="text-truncate">Am I a good boy? The reason I ask is because someone
                                            told me that people say this to all dogs, even if they aren't good...</div>
                                        <div class="small text-gray-500">Chicken the Dog · 2w</div>
                                    </div>
                                </a>
                                <a class="dropdown-item text-center small text-gray-500" href="#">Read More Messages</a>
                            </div>
                        </li>

                        <div class="topbar-divider d-none d-sm-block"></div>

                        <!-- Nav Item - User Information -->
                        <li class="nav-item dropdown no-arrow">
                            <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button"
                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Douglas McGee
                                <img class="img-profile rounded-circle"
                                    src="img/undraw_profile.svg">
                            </a>
                            <!-- Dropdown - User Information -->
                            <div class="dropdown-menu dropdown-menu-right shadow animated--grow-in"
                                aria-labelledby="userDropdown">
                                <a class="dropdown-item" href="#">
                                    ^__i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"__^
                                    Profile
                                </a>
                                <a class="dropdown-item" href="#">
                                    ^__i class="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400">
                                    Settings
                                </a>
                                <a class="dropdown-item" href="#">
                                    ^__i class="fas fa-list fa-sm fa-fw mr-2 text-gray-400">
                                    Activity Log
                                </a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">
                                    ^__i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400">
                                    Logout
                                </a>
                            </div>
                        </li>

                    </ul>

                </nav>
                <!-- End of Topbar -->

                <!-- Begin Page Content,iadded here server -->
                <div class="container-fluid" runat="server">

            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

        

            </asp:ContentPlaceHolder>
                    </div>
                </div>

                <!-- Footer -->
            <footer class="sticky-footer bg-white">
                <div class="container my-auto">
                    <div class="copyright text-center my-auto">
                        <span>Copyright © Your Website 2020</span>
                    </div>
                </div>
            </footer>
            <!-- End of Footer -->

         
        </div>
        </div>

         <!-- Scroll to Top Button-->
    <a class="scroll-to-top rounded" href="#page-top">
        ^__i class="fas fa-angle-up">
    </a>

        <!-- Logout Modal-->
    <div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
                    <a class="btn btn-primary" href="login.html">Logout</a>
                </div>
            </div>
        </div>
    </div>

               

        <!-- Bootstrap core JavaScript-->
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

    <!-- Core plugin JavaScript-->
    <script src="vendor/jquery-easing/jquery.easing.min.js"></script>

    <!-- Custom scripts for all pages-->
    <script src="js/sb-admin-2.min.js"></script>

    <!-- Page level plugins -->
    <script src="vendor/chart.js/Chart.min.js"></script>

    <!-- Page level custom scripts -->
    <script src="js/demo/chart-area-demo.js"></script>
    <script src="js/demo/chart-pie-demo.js"></script>

    </form>
</body>
</html>

thanks to support me , I am really disappointed I am trying to fix it for about one week.

What I have tried:

I tried to make this content page code in a normal web form page (not content or related to any master page) and it worked

Posted 4-Mar-21 12:32pm
Member 14574143

Add a Solution

Comments

Richard Deeming 5-Mar-21 4:45am

You're including jquery.min.js twice, which will cause problems.

Beyond that, you need to check your browser's developer console for errors to try to find out what the problem is.

Member 14574143 5-Mar-21 6:12am

thanks a lot Richard it is working now , but while the page load it takes about 6 sec to apply the jQuery , is there is any solution to make apply the jQuery immediately.

Richard Deeming 5-Mar-21 6:14am

Sounds like you're returning a massive page, which is taking a long time for the browser to parse.

Consider using AJAX to load the table data instead, and enable paging.

Member 14574143 5-Mar-21 6:44am

how could i make it please also another thing the paging buttons are so classic i want to add button on the page number, thanks alot for your support you are amazing and intelligent!

Richard Deeming 5-Mar-21 6:46am

This seems to cover it:
Using jQuery DataTable in ASP.Net Web Forms[^]

Member 14574143 5-Mar-21 6:50am

thanks alot i will try it and feedback you but what about changing the pagination button styles ?

Richard Deeming 5-Mar-21 6:51am

Something like this?
Gridview Pager style using CSS in asp.net[^]

Member 14574143 5-Mar-21 6:56am

thanks alot for your support i will try and feedback you

Member 14574143 5-Mar-21 8:06am

i tried it and it say localhost:44386 says undefined

Member 14574143 5-Mar-21 8:30am

it seems it doesn't work with tables have more 10000 row is the database, could you advise please

Richard Deeming 5-Mar-21 9:40am

I have the DataTables plugin working successfully on a table with nearly 1 million rows.

Are you sure you're loading the data in pages via AJAX, and not trying to load all 10,000 rows in one go?

Member 14574143 5-Mar-21 9:50am

i dont know if all row loaded in one go or noti folloed the guide oyu sent to me this is my code:
[WebMethod]
public static List<customer> GetCustomers()
{
MySql.Data.MySqlClient.MySqlConnection conn;
MySql.Data.MySqlClient.MySqlCommand cmd;
string queryStr;

List<customer> customers = new List<customer>();

string connstring = System.Configuration.ConfigurationManager.ConnectionStrings["WebAppConnString"].ToString();
conn = new MySql.Data.MySqlClient.MySqlConnection(connstring);
conn.Open();
//queryStr = "";
queryStr = "SELECT * FROM webappdemo.dailtest;";
cmd = new MySql.Data.MySqlClient.MySqlCommand(queryStr, conn);

MySql.Data.MySqlClient.MySqlDataReader dr = cmd.ExecuteReader();
while (dr.Read())
{
customers.Add(new Customer
{
sitecode = dr["sitecode"].ToString(),
siteid = dr["siteid"].ToString(),
region = dr["region"].ToString(),
bsc = dr["bsc"].ToString(),
office = dr["office"].ToString(),
tier = dr["tier"].ToString(),
category = dr["category"].ToString(),
subcategory = dr["subcategory"].ToString(),
owner = dr["owner"].ToString()

});

}

return customers;
}

----------------------------------------------
protected void Page_Load(object sender, EventArgs e)
{
//label11.Text = "dd";

if (!this.IsPostBack)
{
// GVbind();
DataTable dummy = new DataTable();
dummy.Columns.Add("sitecode");
dummy.Columns.Add("siteid");
dummy.Columns.Add("region");
dummy.Columns.Add("bsc");
dummy.Columns.Add("office");
dummy.Columns.Add("tier");
dummy.Columns.Add("category");
dummy.Columns.Add("subcategory");
dummy.Columns.Add("owner");
dummy.Rows.Add();
GridView2.DataSource = dummy;
GridView2.DataBind();
GridView2.UseAccessibleHeader = true;
GridView2.HeaderRow.TableSection = TableRowSection.TableHeader;
}

-----------------------
and this is my page

<asp:gridview id="GridView2" runat="server" cssclass="display compact" autogeneratecolumns="false" onselectedindexchanged="GridView1_SelectedIndexChanged">
<columns>
<asp:boundfield datafield="sitecode" headertext="firstname">
<asp:boundfield datafield="siteid" headertext="middlename">
<asp:boundfield datafield="region" headertext="lastname">
<asp:boundfield datafield="bsc" headertext="email">
<asp:boundfield datafield="office" headertext="phonenumber">
<asp:boundfield datafield="tier" headertext="username">
<asp:boundfield datafield="category" headertext="password">
<asp:boundfield datafield="subcategory" headertext="salt">
<asp:boundfield datafield="owner" headertext="saltpassword">

$(function () {
$.ajax({
type: "POST",
url: "daily.aspx/GetCustomers",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function (response) {
alert(response.d);
},
error: function (response) {
alert(response.d);
}
});
});
function OnSuccess(response) {
$("[id*=GridView2]"

Member 14574143 5-Mar-21 9:52am

function OnSuccess(response) {
$("[id*=GridView2]").DataTable(
{
bLengthChange: true,
lengthMenu: [[5, 10, -1], [5, 10, "All"]],
bFilter: true,
bSort: true,
bPaginate: true,
data: response.d,
columns: [{ 'data': 'sitecode' },
{ 'data': 'siteid' },
{ 'data': 'region' },
{ 'data': 'bsc' },
{ 'data': 'office' },
{ 'data': 'tier' },
{ 'data': 'category' },
{ 'data': 'subcategory' },
{ 'data': 'owner' }]
});
};

and this is the class icretaed public class Customer
{

public string sitecode { get; set; }
public string siteid { get; set; }
public string region { get; set; }
public string bsc { get; set; }
public string office { get; set; }
public string tier { get; set; }
public string category { get; set; }
public string subcategory { get; set; }
public string owner { get; set; }

}
please support me

Richard Deeming 5-Mar-21 10:04am

There is nothing in your SQL query to limit the returned records, so you are loading all records in one go. You are not splitting the data into pages.

Aside from the fact that the browser will struggle to load that many rows at once, there's no way your users are going to scroll through that many rows to find the one they want.

Member 14574143 5-Mar-21 10:10am

so no solution ? i am really disappointed.

Richard Deeming 5-Mar-21 10:11am

The solution is to load the data in pages, rather than dumping tens of thousands of rows into the browser and expecting the user to make sense of it!

Member 14574143 5-Mar-21 10:14am

ok could i do that please

Member 14574143 5-Mar-21 10:23am

how could i do that please ?

Richard Deeming 5-Mar-21 10:31am

Use the DataTables plugin to load the data, rather than making your own AJAX request.

Use the start and length parameters sent by the DataTables plugin to filter your query to only load a specific page of data.

Use the LIMIT / OFFSET clause in your MySql query to load a single page of data.
SELECT ...columns... FROM webappdemo.dailtest ORDER BY ...sort columns... LIMIT @length OFFSET @start;

Member 14574143 6-Mar-21 5:56am

one more thing please i am now trying to add export button to the table but i failed i tried all the solution on the internet

$(function () {
$.ajax({
type: "POST",
url: "daily.aspx/GetCustomers",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function (response) {
alert(response.d);
},
error: function (response) {
alert(response.d);
}
});
});
function OnSuccess(response) {
$("[id*=GridView2]").DataTable(
{
"sScrollX": "100%",
"bScrollCollapse": true,
scrollY: "100%",
bLengthChange: true,
lengthMenu: [[5, 10,20, -1], [5, 10,20, "All"]],
bFilter: true,
bSort: true,
bPaginate: true,
data: response.d,
columns: [{ 'data': 'sitecode' },
{ 'data': 'siteid' },
{ 'data': 'region' }]
});
};

Member 14574143 5-Mar-21 10:46am

The problem was caused by the request timeout but not the size of the data. Since I was using ajax updatepanel in aspx project I added AsyncPostBackTimeOut='300000000' to my ToolkitScriptManager tag and added

<system.web.extensions>
<scripting>
<webservices>
<jsonserialization maxjsonlength="300000000">

to my Web.config file as documented here. Now I can load the data without any problem though it's taking some time depending with the number of records returned. Thanks for your help.

Add your solution here

Plain Text
ASM
ASP
ASP.NET
BASIC
BAT
C#
C++
COBOL
CoffeeScript
CSS
Dart
dbase
F#
FORTRAN
HTML
Java
Javascript
Kotlin
Lua
MIDL
MSIL
ObjectiveC
Pascal
PERL
PHP
PowerShell
Python
Razor
Ruby
Scala
Shell
SLN
SQL
Swift
T4
Terminal
TypeScript
VB
VBScript
XML
YAML

OKPaste as

Strip HTML
Encode HTML
Paste as-is
Code block
Quoted Text
Best guess

To display as

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email

Password

Forgot your password?

Your Email

This email is in use. Do you need your password?

Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

Submit your solution

When answering a question please:

Read the question carefully.

Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.

If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.

Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.
Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)