GridView 分页 显示加载进度

js:

 
    <script type="text/javascript">
        function onUpdating() {
            var updateProgressDiv = document.getElementById('upCustomer');
            var gridView = document.getElementById('gvUpdateProgress');

            var gridViewBounds = Sys.UI.DomElement.getBounds(gridView);
            var updateProgressDivBounds = Sys.UI.DomElement.getBounds(updateProgressDiv);

            var x = gridViewBounds.x + Math.round(gridViewBounds.width / 2) - Math.round(updateProgressDivBounds.width / 2);
            var y = gridViewBounds.y + Math.round(gridViewBounds.height / 2) - Math.round(updateProgressDivBounds.height / 2);

            Sys.UI.DomElement.setLocation(updateProgressDiv, x, y);

        }     
    </script>

<div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <table border="0" cellpadding="0" cellspacing="0" width="100%">
            <tbody>
            <tr>
             <td style="  100%; ">
             <asp:UpdateProgress ID="upCustomer" AssociatedUpdatePanelID="upnlCustomer" runat="server">
              <ProgressTemplate>
               <div id="imgdivLoading" align="center" valign="middle" runat="server"  >
               <asp:Image ID="imgLoading" runat="server" ImageUrl="Images/loading.gif"  />
              </div>
               </ProgressTemplate>
              </asp:UpdateProgress>
             </td>
           </tr>
               
            <tr>
            <td style=" 100%">
             <asp:UpdatePanel ID="upnlCustomer" runat="server">
             <ContentTemplate>
               <asp:GridView ID="gvUpdateProgress"  .... </asp:GridView>
              </ContentTemplate>
             </asp:UpdatePanel>
            </td>
            </tr>
            </tbody>
        </table>
    </div>

 

 

 

protected void Page_Load(object sender, EventArgs e)
    {
        gvUpdateProgress.Attributes.Add("onclick", " onUpdating();");
        bindGrid();
    }

 

 

 private void bindGrid()
    {
        SqlConnection conn = new SqlConnection("");
        conn.ConnectionString = "Trusted_Connection=yes;Addr=Localhost;Initial Catalog=Northwind";
        SqlCommand cmdCustomer = new SqlCommand("select CustomerID,CompanyName,ContactName,City,PostalCode,Country,Phone from Customers", conn);
        SqlDataAdapter adptCustomer = new SqlDataAdapter(cmdCustomer);
        DataSet dsCustomer = new DataSet();
        adptCustomer.Fill(dsCustomer,"Customer");
        gvUpdateProgress.DataSource = dsCustomer.Tables["Customer"].DefaultView;
        gvUpdateProgress.DataBind();

    }

protected void gvUpdateProgress_PageIndexChanging(object sender, GridViewPageEventArgs e)
    {
        System.Threading.Thread.Sleep(3000); // waiting period
        gvUpdateProgress.PageIndex = e.NewPageIndex;
        gvUpdateProgress.DataBind();
    }