利用Ajax实现DataGrid无刷新分页

DataGrid功能强大，我们只用写几行代码就能够实现复杂的页面数据显示。数据多的时候免不了要分页显示，DataGrdi本身自带分页功能，但是当数据量少的时候很方便，当大数据量时，DataGrid得分页机制就不太好了。于是在网上找到了一种比较好的利用存储过程实现分页机制(客户端想要第几页就取第几页数据，上十万级的数据查询也很快，数据量再多的时候就没试过了，等有时间把利用存储过程分页也写在blog上)在工作中为了让客户用的更舒服点，也赶时髦，想利用Ajax来实现DataGrid无刷新分页。主要用RenderControl方法把DataGrid翻译成Html代码，然后用Web Service 返回。当然也可以用别的方法。

GenericAjaxWS.asmx.cs

  1//GenericAjaxWS.asmx.cs
  2using System;
  3using System.Collections;
  4using System.ComponentModel;
  5using System.Data;
  6using System.Data.SqlClient;
  7using System.Diagnostics;
  8using System.Web;
  9using System.Web.Services;
 10using System.Configuration;
 11using System.Web.UI.WebControls;
 12using System.Web.UI;
 13using System.IO;
 14namespace GenricAjaxWS
 15{
 16      [WebService(Namespace="http://localhost/GenricAjaxWS/")]
 17      public class GenricAjaxWS : System.Web.Services.WebService
 18      {
 19            SqlCon nec tion con;
 20            SqlDataAdapter da;
 21            SqlCommand cmd;
 22            DataSet ds;
 23            public GenricAjaxWS()
 24            {
 25              InitializeComponent();
 26              con= new SqlConnection(ConfigurationSettings.AppSettings["Connect"]);
 27              da=new SqlDataAdapter("",con);
 28              cmd=new SqlCommand("",con);
 29              ds=new DataSet("TahaSchema");
 30            }
 31            Component Designer generated code#region Component Designer generated code
 32            //Required by the Web Services Designer 
 33            private IContainer components = null;
 34            /**//// <summary>
 35            /// Required method for Designer support - do not modify
 36            /// the contents of this method with the code editor.
 37            /// </summary>
 38            private void InitializeComponent()
 39            {
 40            }
 41            /**//// <summary>
 42            /// Clean up any resources being used.
 43            /// </summary>
 44            protected override void Dispose( bool disposing )
 45            {
 46              if(disposing && components != null)
 47              {
 48                    components.Dispose();
 49              }
 50              base.Dispose(disposing);
 51            }
 52            
 53            #endregion
 54 
 55/**//// <summary>
 56/// this function accepts TSql statment and returns dataset
 57/// </summary>
 58 
 59            [WebMethod]
 60            public string getGrid(string sqlStr,int pageIndex)
 61            {
 62              da.SelectCommand.CommandText=sqlStr;
 63              da=new SqlDataAdapter(sqlStr,con);
 64              da.Fill(ds,"myTable");
 65              DataGrid dataGrid = new DataGrid();
 66              dataGrid.AutoGenerateColumns = true;
 67              dataGrid.DataSource = ds.Tables["myTable"].DefaultView;
 68              dataGrid.AllowPaging = true;
 69              dataGrid.PageSize = 4;
 70              dataGrid.PagerStyle.Visible = false;
 71              dataGrid.CurrentPageIndex = pageIndex;
 72              try
 73              {
 74                    dataGrid.DataBind();
 75              }
 76              catch(Exception)
 77              {
 78              }
 79              StringWriter wr = new StringWriter();
 80              HtmlTextWriter writer = new HtmlTextWriter(wr);
 81              dataGrid.RenderControl(writer);
 82              string gridHtml = wr.ToString();
 83              wr.Close();
 84              writer.Close();
 85              DropDownList ddl_Pager = new DropDownList();
 86              ddl_Pager.Attributes.Add("onchange","goToPage(this.value)");
 87              string pager="";
 88              for(int i=0;i<dataGrid.PageCount;i++)
 89              {
 90                ListItem lItem = new ListItem(i.ToString(),i.ToString());
 91                ddl_Pager.Items.Add(lItem);
 92                if(i==pageIndex)
 93                {
 94                  pager += "[background-color:#ffdd11;width" + 
 95                         ":20px;align:center\"><a href=\"#\" + 
 96                         "=\"goToPage('"+i+"')\">"+i+"</a>]";
 97                }
 98                else
 99                {
100                  pager += "[20px;align:center\">" + 
101                         "<a href=\"#\" + 
102                         "('"+i+"')\" >"+i+"</a>]";
103                }
104              }
105              ddl_Pager.SelectedIndex = pageIndex;
106              wr = new StringWriter();
107              writer = new HtmlTextWriter(wr);
108              ddl_Pager.RenderControl(writer);
109              string pagerHtml = "<input type='button'" + 
110                                 " value='<' onclick='goToPrevPage()'>";
111              pagerHtml += wr.ToString();
112              pagerHtml += "<input type='button' value='>'" + 
113                           " onclick='this.disabled=goToNextPage()'>";
114              wr.Close();
115              writer.Close();
116              return pager+pagerHtml+"<br>"+gridHtml;
117            }
118      }
119}
120

上面的是Web服务，然后利用Ajax请求这个服务来获取要现实的数据。以下是客户端JavaScript代码：

AjaxFuncs.js

 1//声明异步请求对象
 2/////////////////////////////////////////////////////////////////
 3var xmlhttp;
 4/////////////////////////////////////////////////////////////////
 5//填充DataGrid,这个函数有3个参数。
 6//第一个是包含DataGrid的DIV的ID
 7//第二个是查询数据的sql语句
 8//第三个是要获取第几页数据
 9
10/////////////////////////////////////////////////////////////////
11var ph;
12var fil lG rid_Str_SQL="";
13var currentPageIndex ;
14function fil lG rid(myPH,str_Sql,pageIndex){
15      ph = window.document.getElementById(myPH);
16      fillGrid_Str_SQL = str_Sql;
17      currentPageIndex = pageIndex;
18      var url = "http://localhost/GenricAjaxWS/GenricAjaxWS" + 
19                ".asmx/getGrid?sqlStr="+str_Sql+
20                "&pageIndex="+pageIndex;
21      if(window.XMLHttpRequest)
22    {
23        xmlhttp=new XMLHttpRequest();
24        xmlhttp.onreadystatechange=fillGrid_Change;
25        xmlhttp.open("GET",url,true);
26        xmlhttp.send(null);
27    }
28    //code for IE
29    else if (window.ActiveXObject)
30        {
31        try
32            {
33            xmlhttp= new ActiveXObject("Msxml2.XMLHTTP");
34            }
35        catch(e)
36            {
37            try
38            {
39                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
40            }
41            catch(e){}
42        }
43        if(xmlhttp)
44        {
45            try
46            {
47            xmlhttp.onreadystatechange=fil lG rid_Change;
48            xmlhttp.open("GET",url,false);
49            xmlhttp.send();
50            }
51            catch(e){}
52        }
53    } 
54}
55
56function fillGrid_Change()
57{
58      if(xmlhttp.readyState==4&&xmlhttp.status==200)
59      {
60          //var rows=xmlhttp.respon seX ML.
61          //        selectNodes(".//TahaSchema//TahaTable");
62          var row =   xmlhttp.responseXML.selectNodes(".//");
63          ph.innerHTML = row[1].text;
64      }
65}
66function goToPage(pageIndex){
67      fil lG rid(ph.id,fillGrid_Str_SQL,pageIndex)
68}
69 
70function goToNextPage(){
71      try{  
72            fillGrid(ph.id,fillGrid_Str_SQL, 
73                     parseInt(currentPageIndex)+1);
74            return false;
75      }
76      catch(e){
77            return true;
78      }
79}
80function goToPrevPage(){
81      fil lG rid(ph.id,fillGrid_Str_SQL,
82               parseInt(currentPageIndex)-1)
83}

最后就是显示数据的html页面，实例代码如下：

AjaxGrid.html：

 1
 2<html>
 3  <head>
 4    <title>AjaxGrid</title>
 5  <script language="javascript" 
 6        type="text/javascript" src="ajaxFuncs.js"></script>
 7  </head>
 8  <body  onload="fil lG rid('myPH','select * from sales',1)">
 9            
10    <form id="Form1" method="post" runat="server">
11                        <div id="myPH" ></div>
12     </form>
13  </body>
14</html>