locked
Datattable JQuery applying late and showing data early RRS feed

  • Question

  • User-1971168174 posted

    Hi,

    Below is the example where if i am binding like 7000 records,after running the page data is binding in Gridview early and shown up in hang mode but Datatable jquery keeps on running over gridview ,Is there a way so that page jquery loads up early than gridview or how can i show loader until jquery is applying.

     <script src="Scripts/jquery-1.9.1.js"></script>
        
       <script src="Scripts/DataTables/jquery.dataTables.min.js"></script>
        <link href="Content/DataTables/css/jquery.dataTables.min.css" rel="stylesheet" />
         <script type="text/javascript">
    
             $(document).ready(function () {
                 $("#GridView2").prepend($("<thead></thead>").append($("#GridView2").find("tr:first"))).dataTable({
                     "scrollY": "750px",
                     "sScrollX": "100%",
                     "sScrollXInner": "110%",
                     "scrollCollapse": true,
                     "paginate": true, "iDisplayLength": 50,
                     "bProcessing": true,
    
                     "order": [[1, "desc"]],
                     "sDom": '<"top">rt<"bottom"ilp><"clear">',
                     "deferRender": true
                 });
    
             });
           
           
    
        </script>
     <asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="true"></asp:GridView>
     DataTable dt1 = new DataTable();
            dt1.Columns.Add("ID");
            dt1.Columns.Add("Value");
            dt1.Columns.Add("Name");
    
            for (int i = 0; i <= 7000; i++)
            {
                dt1.Rows.Add("1", "20", "neeraj");
                dt1.Rows.Add("2", "40", "kailish");
                dt1.Rows.Add("3", "30", "manu");
            }
    
            GridView2.DataSource = dt1;
            GridView2.DataBind();

    thanks!


    Wednesday, May 25, 2016 3:21 PM

All replies

  • User61956409 posted

    Hi neerajkumarmodi,

    You could try to delay showing GridView, like this.

    $(document).ready(function () {
        $("#GridView2").hide();
        $("#GridView2").prepend($("<thead></thead>").append($("#GridView2").find("tr:first"))).dataTable({
            //options
        });
        setTimeout(function () {
            $("#GridView2").show();
        }, 5000);
    })
    

    Best Regards,

    Fei Han

    Thursday, May 26, 2016 6:24 AM
  • User-1971168174 posted

    Hi Fei,

    Can we show some loader jif or something here till jquery is processing.

    Thanks

    Thursday, May 26, 2016 12:12 PM
  • User61956409 posted

    Hi neerajkumarmodi,

    You could try to display loading gif in a overlay with greatest stack order, then you could hide overlay on setTimeout() method.

    $(document).ready(function () {
        $("#GridView2").hide();
        $("#GridView2").prepend($("<thead></thead>").append($("#GridView2").find("tr:first"))).dataTable({
            //options
        });
    
        $("#loadingimg").show();
    
        setTimeout(function () {
            $("#loadingimg").hide();
            $("#GridView2").show();
        }, 5000);
    })
    

    Best Regards,

    Fei Han

    Tuesday, May 31, 2016 6:17 AM
  • User-1971168174 posted

    Hi Fei,

    Thanks for your reply!

    You are defining time period for hiding the gridview, in some cases it might take more time or less,can we put loader till jquery is applying on gridview ?

    Thanks!

    Tuesday, May 31, 2016 6:26 AM