利用AjaxPro框加结合存储过程实现的无刷新分页

首先,存储过程调用的是先前发的那个分页存储过程
在这里只给出必要的一些代码.我英语不太好,所以呢,命名不太规范哈.
JS代码如下

< script language = " javascript " >
var  pgs;
pgs = 5 ;   // 页大小
function  $(id) {return document.getElementById(id);}


function  PageLoad()    // 页面初始
{
var res=MLXZ.ework.LYZX_New.GetNews($("wzType").value,pgs,"0").value;
res=res.split(",");
$("ZongShu").innerHTML=res[0];  //总记录数
$("ZongYeShu").value=res[1];   //总页数
$("DangQianYe").value="1";        //当前页
$("DangQian").innerHTML="1";     //当前页
$("Zong").innerHTML=res[1];        //总页数
if(res[0]!="0") 
{

 FenYe();     //调用分页
}
else
{
alert("没有记录");
}
}

function  FenYe()    // 分页获取记录
{
var res=MLXZ.ework.LYZX_New.GetNews($("wzType").value,pgs,$("DangQianYe").value).value;
$("News").innerHTML=res;
}

PageLoad();

function  BeginFen(str)  // 准备分页
{
var ye;
ye=parseInt($("DangQianYe").value);
var yes;
switch (str)
{
case "Top" : 
  if(ye==1){alert("当前已是第一页");yes=1;}else{ye=1;}
break;
case "Shang" :
  if(ye==1){alert("没有上一页了");yes=1;}else{ye=ye-1;}
break;
case "Xia" :
  if(ye==parseInt($("ZongYeShu").value)){alert("没有下一页了");yes=1;}else{ye=ye+1;}
break;
case "Bottom" :
  if(ye==parseInt($("ZongYeShu").value)){alert("当前已是最后一页");yes=1;}else{ye=parseInt($("ZongYeShu").value);}
break;
}
if(yes==1)
{
}
else
{
$("DangQianYe").value=ye.toString();
$("DangQian").innerHTML=ye.toString();
FenYe();
}
}


function  DelNews(id)
{
if(confirm("确定要删除吗？"))
{
var res=MLXZ.ework.LYZX_New.DelNews(id).value;
  if(res!="0")
  {
    FenYe();
    alert("删除成功");    
  }
  else
  {
    alert("删除失败");
  }
}
else
{
return false;}
}

         </ script >

网页中的HTML代码分页按钮部分

                                         < table  width ="670"  height ="21"  border ="0"  align ="center"  cellpadding ="0"  cellspacing ="0" >
                                             < tr  align ="center" >
                                                 < td  width ="169"  height ="21" >
                                                    当前共
                                                     < DIV  id ="ZongShu"  style ="DISPLAY: inline; WIDTH: 33px; HEIGHT: 18px"  align ="center"  ms_positioning ="FlowLayout" ></ DIV >
                                                    条记录 </ td >
                                                 < td  width ="155" > 当前
                                                     < DIV  id ="DangQian"  style ="DISPLAY: inline; WIDTH: 16px; HEIGHT: 18px"  ms_positioning ="FlowLayout" ></ DIV >
                                                    页/共
                                                     < DIV  id ="Zong"  style ="DISPLAY: inline; WIDTH: 13px; HEIGHT: 18px"  ms_positioning ="FlowLayout" ></ DIV >
                                                    页 </ td >
                                                 < td  width ="60" >< a  href ="#"  onclick ="BeginFen('Top')" > 首页 </ a ></ td >
                                                 < td  width ="60" >< a  href ="#"  onclick ="BeginFen('Shang')" > 上一页 </ a ></ td >
                                                 < td  width ="60" >< a  href ="#"  onclick ="BeginFen('Xia')" > 下一页 </ a ></ td >
                                                 < td  width ="60" >< a  href ="#"  onclick ="BeginFen('Bottom')" > 尾页 </ a ></ td >
                                                 < td  width ="100" ></ td >
                                             </ tr >
                                         </ table >
                                         < INPUT  id ="DangQianYe"  type ="hidden" >< INPUT  id ="ZongYeShu"  type ="hidden" >

改变查询类型的下拉列表框代码

                                                     < SELECT  id ="wzType"  onchange ="PageLoad()" >
                                                         < option  value ="1"  selected > 旅游资讯 </ option >
                                                         < option  value ="12" > 旅游要闻 </ option >
                                                         < option  value ="13" > 图片资讯 </ option >
                                                         < option  value ="4" > 图游西藏 </ option >
                                                         < option  value ="3" > 人文地理 </ option >
                                                     </ SELECT >

另外 HTML页中还得有一个名为"News"的层

后台代码

        #region GetNews(string type,string Pgs,string Pgn) 返回记录
        ///  < summary >
        /// 返回记录
        ///  </ summary >
        ///  < param  name ="type" > 记录类型 </ param >
        ///  < param  name ="Pgs" > 页大小 </ param >
        ///  < param  name ="Pgn" > 页码 </ param >
        ///  < returns > 记录字符串 </ returns >         
        [AjaxPro.AjaxMethod()]
        public string GetNews(string type,string Pgs,string Pgn)
        {
           string sql;
            sql="exec GetLYZXNews "+type+","+Pgs+","+Pgn;
           db yang=new db();
           DataTable dt=new DataTable();
           dt=yang.GetDataTable(sql);
            string s;
            if (Pgn=="0")
            {
                s=dt.Rows[0]["ZongShu"].ToString()+","+dt.Rows[0]["YeShu"].ToString();
            }
            else
            {
                s=" < table  width ='670'  border ='0'  align ='center'  cellpadding ='0'  cellspacing ='0' > ";
                for(int i=0;i < dt .Rows.Count;i++)
                {
                    s+ ="<tr align='center'>" ;
                    s+ ="<td width='272'>" +dt.Rows[i]["title"].ToString()+"</td > ";
                    s+=" < td  width ='122' > "+dt.Rows[i]["author"].ToString()+" </ td > ";
                    s+=" < td  width ='142' > "+dt.Rows[i]["postdate"].ToString()+" </ td > ";
                    s+=" < td  width ='144' >< a  href ='LYZX_New_Updata.aspx?id="+dt.Rows[i]["id"].ToString()+"' > 修改 </ a >  |  < a  href ='#'  onClick ='DelNews("+dt.Rows[i]["id"].ToString()+")' > 删除 </ td ></ tr > ";
                }
                s+=" </ table > ";
            }
            return s;
        }
        #endregion

写给初学者哈