关于Ajax无刷新翻页

    接触Ajax有一段时间了，但是还不是很精通！ 因为项目需要，所以做了一个简单的无刷新翻页的例子。现在贴出来！ 希望对初学者有帮助，并希望高手能指点一二！
   
    这里使用了jquery，和顺子哥哥( 李华顺的Blog)的jquery.xml.js！

    好，看代码！

    GetData.aspx.cs
   

 1 using  System;
 2 using  System.Data;
 3 using  System.Configuration;
 4 using  System.Collections;
 5 using  System.Web;
 6 using  System.Web.Security;
 7 using  System.Web.UI;
 8 using  System.Web.UI.WebControls;
 9 using  System.Web.UI.WebControls.WebParts;
10 using  System.Web.UI.HtmlControls;
11
12 public  partial  class  GetData : BasePage
13 {
       //实例化BLL
14    protected web.BLL.tblTest tblTestBLL = new web.BLL.tblTest();
15    protected void Page_Load(object sender, EventArgs e)
16    {
17        if (!Page.IsPostBack)
18        {
19            Int32 PageSize = Int32.Parse(GetQueryString("PageSize"));
20            Int32 PageNumber = Int32.Parse(GetQueryString("PageNo"));
21            String result = null;
                //这个地方使用了自己的封装的翻页方法
22            DataSet ds = tblTestBLL.GetList(PageSize, PageNumber, "", out result);
23            //将返回的总记录条数和输出的数据xml输出
24            String OutStr = "<total>" + result + "</total>";
25            WriteXMLResult("<xml>" + OutStr + ds.GetXml() + "</xml>");
26        }
27    }
28}

    Default.aspx

  1 <% @ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default"  %>
  2
  3 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
  4
  5 < html  xmlns ="http://www.w3.org/1999/xhtml"   >
  6 < head  runat ="server" >
  7      < title > 翻页 </ title >
  8      < script  type ="text/javascript"  src ="javascript/jquery/jquery.js" ></ script >
  9      < script  type ="text/javascript"  src ="javascript/jquery/jquery.xml.js" ></ script >
 10      < script  type ="text/javascript" >
 11        var PageSize = 10;
 12        var PageNum = 1;
 13        var total = 0;
 14        var OutPager = "";
 15        
 16        var AjaxImages = "images/ajax-loader.gif";
 17        
 18        $(document).ready(function(){
 19            $("#showlist").html("<img src=\"" + AjaxImages + "\" alt=\"\" align=\"absmiddle\" /> 读取中");
 20            GetList(PageSize ,PageNum);
 21            outpagehtml();
 22        });
 23        
 24        //获得总页数
 25        var getTotal = function(){
 26            var PageCount = 0;
 27            if (total % PageSize == 0)
 28            {
 29                PageCount = total / PageSize;
 30            }
 31            else
 32            {
 33                PageCount = total / PageSize + 1;
 34            }
 35            return PageCount;
 36        }
 37        
 38        //输出翻页连接
 39        var outpagehtml = function(){
 40            var Pager = $("#Pager");
 41            var outhtml = "";
 42            
 43            if(PageNum == 1)
 44            {
 45                outhtml += '首页 | 上一页  ';
 46            }else{
 47                outhtml += '<a href="javascript:first();">首页</a> | <a href="javascript:previous();">上一页</a>  ';
 48            }
 49            
 50            //此处可进行分页标签连接处理
 51            
 52            if(PageNum >= getTotal())
 53            {
 54                outhtml += '下一页 | 尾页';
 55            }else{
 56                outhtml += '<a href="javascript:next();">下一页</a> | <a href="javascript:last();">尾页</a>';
 57            }
 58            
 59            Pager.html(outhtml);
 60            
 61        }
 62        
 63        //下一页
 64        var next = function(){
 65            PageNum = PageNum + 1;
 66            GetList(PageSize ,PageNum);
 67        }
 68        //上一页
 69        var previous = function(){
 70            PageNum = PageNum - 1;
 71            GetList(PageSize ,PageNum);
 72        }
 73        //第一页
 74        var first = function(){
 75            PageNum = 1;
 76            GetList(PageSize ,PageNum);
 77        }
 78        //最后一页
 79        var last = function(){      
 80            var PageCount = getTotal();
 81            PageNum = PageCount;
 82            GetList(PageSize ,PageNum);
 83        }
 84        
 85        
 86        //获得列表
 87        var GetList = function(el_PageSize ,el_PageNumber)
 88        {
 89            $.ajax({
 90                url:"GetData.aspx?PageSize=" + el_PageSize + "&PageNo=" + el_PageNumber ,
 91                type:"get" ,
 92                dataType:"xml" ,
 93                success:function(xmlDoc){
 94                    //获得记录总数
 95                    
 96                    total = GetNodeValue(xmlDoc.selectSingleNode("//xml/total")); 
 97                    
 98                    //获得每一条记录
 99                    var ListCounts = xmlDoc.selectNodes("//xml/NewDataSet/ds");
100                    var outHtml = "";
101                    for(var i=0;i<ListCounts.length;i++)
102                    {
103                        var id = GetNodeValue(ListCounts[i].selectSingleNode("id"));
104                        outHtml += "<div>" + id + "</div>";
105                    }
106                    $("#showlist").html(outHtml);
107                    outpagehtml();
108                }
109            });
110        }
111     </ script >
112 </ head >
113 < body >
114      < form  id ="form1"  runat ="server" >
115      < div  id ="showlist" >
116         
117      </ div >
118      < div  id ="Pager" >
119
120      </ div >
121      </ form >
122 </ body >
123 </ html >
124

    主要的思想就是从GetData.aspx读取xml~
    不怎么会讲，有问题和我沟通，给我留言！ 希望各位多多指点！

转载于:https://www.cnblogs.com/publiclll/archive/2007/11/08/953396.html