使用ajax.net实现datagrid的客户端分页

其实就是使用RenderControl 方法，摘自一个老外的blog

GenericAjaxWS.asmx.cs

using  System;
using  System.Collections;
using  System.ComponentModel;
using  System.Data;
using  System.Data.SqlClient;
using  System.Diagnostics;
using  System.Web;
using  System.Web.Services;
using  System.Configuration;
using  System.Web.UI.WebControls;
using  System.Web.UI;
using  System.IO;

namespace  GenricAjaxWS
{
      [WebService(Namespace="http://localhost/GenricAjaxWS/")]
      public class GenricAjaxWS : System.Web.Services.WebService
      {
            SqlConnection con;
            SqlDataAdapter da;
            SqlCommand cmd;
            DataSet ds;

            public GenricAjaxWS()
            {
              InitializeComponent();
              con= new SqlConnection(ConfigurationSettings.AppSettings["Connect"]);
              da=new SqlDataAdapter("",con);
              cmd=new SqlCommand("",con);
              ds=new DataSet("TahaSchema");
            }

            Component Designer generated code#region Component Designer generated code

            //Required by the Web Services Designer 
            private IContainer components = null;

            /**//// <summary>
            /// Required method for Designer support - do not modify
            /// the contents of this method with the code editor.
            /// </summary>
            private void InitializeComponent()
            {
            }

            /**//// <summary>
            /// Clean up any resources being used.
            /// </summary>
            protected override void Dispose( bool disposing )
            {
              if(disposing && components != null)
              {
                    components.Dispose();
              }
              base.Dispose(disposing);
            }
            
            #endregion
 
/**//// <summary>
/// this function accepts TSql statment and returns dataset
/// </summary>
 

            [WebMethod]
            public string getGrid(string sqlStr,int pageIndex)
            {
              da.SelectCommand.CommandText=sqlStr;
              da=new SqlDataAdapter(sqlStr,con);
              da.Fill(ds,"myTable");

              DataGrid dataGrid = new DataGrid();
              dataGrid.AutoGenerateColumns = true;
              dataGrid.DataSource = ds.Tables["myTable"].DefaultView;
              dataGrid.AllowPaging = true;
              dataGrid.PageSize = 4;
              dataGrid.PagerStyle.Visible = false;
              dataGrid.CurrentPageIndex = pageIndex;
              try
              {
                    dataGrid.DataBind();
              }
              catch(Exception)
              {

              }
              StringWriter wr = new StringWriter();
              HtmlTextWriter writer = new HtmlTextWriter(wr);
              dataGrid.RenderControl(writer);
              string gridHtml = wr.ToString();
              wr.Close();
              writer.Close();
              DropDownList ddl_Pager = new DropDownList();
              ddl_Pager.Attributes.Add("onchange","goToPage(this.value)");
              string pager="";
              for(int i=0;i<dataGrid.PageCount;i++)
              {
                ListItem lItem = new ListItem(i.ToString(),i.ToString());
                ddl_Pager.Items.Add(lItem);
                if(i==pageIndex)
                {
                  pager += "[background-color:#ffdd11;width" + 
                         ":20px;align:center/"><a href=/"#/" onclick" + 
                         "=/"goToPage('"+i+"')/">"+i+"</a>]";
                }
                else
                {
                  pager += "[width:20px;align:center/">" + 
                         "<a href=/"#/" οnclick=/"goToPage" + 
                         "('"+i+"')/" >"+i+"</a>]";
                }
              }
              ddl_Pager.SelectedIndex = pageIndex;
              wr = new StringWriter();
              writer = new HtmlTextWriter(wr);
              ddl_Pager.RenderControl(writer);
              string pagerHtml = "<input type='button'" + 
                                 " value='<' οnclick='goToPrevPage()'>";
              pagerHtml += wr.ToString();
              pagerHtml += "<input type='button' value='>'" + 
                           " οnclick='this.disabled=goToNextPage()'>";
              wr.Close();
              writer.Close();
              return pager+pagerHtml+"<br>"+gridHtml;
            }
      }
}

 AjaxFuncs.js
//Variable Declarations
/

var  xmlhttp;
// ///
// fillGrid
// This Function Takes three parameters
// first parameter is the id of a DIV tag to which you want 
// to populate the Grid
// Second Paramaeter is the Sql String
// Third Parameter is the selected page index
// ///
var  ph;
var  fillGrid_Str_SQL = "" ;
var  currentPageIndex ;
function  fillGrid(myPH,str_Sql,pageIndex) {
      ph = window.document.getElementById(myPH);
      fillGrid_Str_SQL = str_Sql;
      currentPageIndex = pageIndex;
      var url = "http://localhost/GenricAjaxWS/GenricAjaxWS" + 
                ".asmx/getGrid?sqlStr="+str_Sql+
                "&pageIndex="+pageIndex;

      if(window.XMLHttpRequest)
    {
        xmlhttp=new XMLHttpRequest();
        xmlhttp.onreadystatechange=fillGrid_Change;
        xmlhttp.open("GET",url,true);
        xmlhttp.send(null);
    }
    //code for IE
    else if (window.ActiveXObject)
        {
        try
            {
            xmlhttp= new ActiveXObject("Msxml2.XMLHTTP");
            }
        catch(e)
            {
            try
            {
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch(e){}
        }

        if(xmlhttp)
        {
            try
            {
            xmlhttp.onreadystatechange=fillGrid_Change;
            xmlhttp.open("GET",url,false);
            xmlhttp.send();
            }
            catch(e){}
        }
    } 
}
// ///
// fillGrid_Change
// ///
function  fillGrid_Change()
{
      if(xmlhttp.readyState==4&&xmlhttp.status==200)
      {
          //var rows=xmlhttp.responseXML.
          //        selectNodes(".//TahaSchema//TahaTable");
          var row =   xmlhttp.responseXML.selectNodes(".//");
          ph.innerHTML = row[1].text;
      }
}

function  goToPage(pageIndex) {
      fillGrid(ph.id,fillGrid_Str_SQL,pageIndex)
}
 
function  goToNextPage() {
      try{  
            fillGrid(ph.id,fillGrid_Str_SQL, 
                     parseInt(currentPageIndex)+1);
            return false;
      }
      catch(e){
            return true;
      }
}

function  goToPrevPage() {
      fillGrid(ph.id,fillGrid_Str_SQL,
               parseInt(currentPageIndex)-1)
}

 

 

Now add a page AjaxGrid.htmlto the project.

AjaxGrid.html

< html >
   < head >
     < title > AjaxGrid </ title >
   < script  language ="javascript"  
        type ="text/javascript"  src ="ajaxFuncs.js" ></ script >
   </ head >
   < body   onload ="fillGrid('myPH','select * from sales',1)" >
            
     < form  id ="Form1"  method ="post"  runat ="server" >
                         < div  id ="myPH"   ></ div >
      </ form >
   </ body >
</ html >