ajax 学习笔记之四 数据分页

下面的实例是在从具体项目中摘出,我会尽量把用到的代码贴出来.让大家理解我的这种方式的分页.
如有不妥,请指正.
1.向服务器提交数据请求,myRequest()方法在笔记三中已经贴出.默认每页从服务器端返回10条数据

 

function  getA(page)
... {
    var time=new Date().getTime();
    myRequest("../temp.aspx","action=pagenation&page="+page+"&time="+time,getAhandle);
}
function  getAhandle() // 回调后的处理函数,主要生成数据表格
... {
     var getxml;
        if(req.readyState==4)
            ...{
                if(req.status==200)
                ...{
                   getxml=req.responseXML;
                //解析服务器端返回的xml数据.
                var root=getxml.documentElement;//获得xml文档的根节点
                var currentPage = root.getElementsByTagName("currentPage")[0].firstChild.data;
                var recordcount=root.getElementsByTagName("recordcount")[0].firstChild.data;
                var pagecount=root.getElementsByTagName("pagecount")[0].firstChild.data;
                document.getElementById("rc").innerHTML="共有记录："+recordcount+"条，共"+pagecount+"页。";
            var prePage = parseInt(currentPage) - 1;
            var nextPage = parseInt(currentPage) + 1;
                var innerHTML="";
                var newslist = getxml.getElementsByTagName("news");
                document.getElementById("ThePage").value=currentPage;
                if((newslist!=null)&&(newslist.length!=0))
                 ...{
                    innerHTML += "<table width="100%" class="ButtonCss4" cellpadding="2" cellspacing="0" border="0" id="acct"> ";
                    innerHTML += "<tr class="ButtonCss"><td height='21'>号码</td><td>文件</td><td>时间</td><td>操作</td></tr>";
                    for(var i=0;i<newslist.length;i++)
                    ...{
                        var news = newslist[i];
                    //news.childNodes[0]对应xml文件的第一个子节点
                        var num = (news.childNodes[0].firstChild==null)?"":news.childNodes[0].firstChild.data;
                        var file = (news.childNodes[1].firstChild==null)?"":news.childNodes[1].firstChild.data;
                        var time = (news.childNodes[2].firstChild==null)?"":news.childNodes[2].firstChild.data;
                        var id = (news.childNodes[3].firstChild==null)?"":news.childNodes[3].firstChild.data;
                        innerHTML += "<tr id='"+id+"'>";
                        innerHTML += "<td  height='25'>"+num+"</td>";
                        innerHTML += "<td  height='25'>"+file+"</td>";
                        innerHTML += "<td  height='25'>"+time+"</td>";
                        innerHTML += "<td  height='25'><a href="#" onclick="deleteItem('"+id+"')">删除</a>";
                        innerHTML += "</tr>";
                    }
                    innerHTML += "</table> ";
                }
                else
                 ...{
                    innerHTML += "暂时没有数据";
                 }
          
            document.getElementById("newslist").innerHTML = innerHTML;
             //----------------判断上下页是否可用。-------------------------
            if(currentPage==1)
            ...{
                document.getElementById("prePage").innerHTML="上一页";
            }
            else
            ...{
                document.getElementById("prePage").innerHTML="<a href="javascript:void(0)" onclick="goToPage('"+prePage+"')">上一页</a>";
            }
            if(currentPage==pagecount)
            ...{
                document.getElementById("nextPage").innerHTML="下一页";
            }
            else
            ...{
                document.getElementById("nextPage").innerHTML="<a href="javascript:void(0)" onclick="goToPage('"+nextPage+"')">下一页</a>";
            }
            //-----------------判断结束---------------------------------------
            document.getElementById("firstPage").innerHTML="<a href="javascript:void(0)" onclick="goToPage('1')">首页</a>";
            if(pagecount==0)
            ...{
                 document.getElementById("lastPage").innerHTML="尾页";
            }
            else
            ...{
                document.getElementById("lastPage").innerHTML="<a href="javascript:void(0)" onClick="goToPage('"+pagecount+"')">尾页</a>";
            }
          }
        }     
}
// 页面跳转,将nextPage返回至服务器端,再进行数据交互.
     function  goToPage(page) 
      ... {
       var time=new Date().getTime();
       myRequest("../Temp.aspx","id="+page+"&time="+time+"&action=pagenation",getAhandle);
     }
     
function  Button1_onclick() 
... {
    getA(1);//调用第一页的数据.
}

2.服务器端处理函数:C#

 

protected   void  Page_Load( object  sender, EventArgs e)
... {
if (action == "pagenation")
            ...{
                string pagenum = Request.Form["id"].ToString();
                int page = -1;
                try
                ...{
                    page = int.Parse(pagenum);
                }
                catch ...{ }
                string xml = GetData(page);//获取分页后的数据.
                if (xml != "0") //如果获得记录集
                ...{
                    int recordcount = GetRecordCount();//获取符合条件的全部记录总数,用以计算页数.
                    int pagecount = GetPageCount(recordcount);//获取总页数.
                    xml += "<recordcount>" + recordcount + "</recordcount>";
                    xml += "<pagecount>" + pagecount + "</pagecount>";
                    xml += "<currentPage>" + page + "</currentPage>";
                    xml += "</newslist>";
                }
                Response.ContentType = "application/xml";//C#返回客户端是xml格式,需要加上这句话.
                Response.Write(xml);
            }
}

// GetData()代码
  // ========================分页开始===================================
     protected   string  GetData( int  id)
     ... {
        if (id == 1)
        ...{
            id = 0;
        }
        else
        ...{
            id = id - 1;
        }

        int ct = 10 * id;
        string xml = "<newslist>";
        string sql = "";
       sql = "select top 10 * from temp where id not in(select top " +
                ct + " id from temp)";
        }
        SqlDataReader dr  =   null ;
        SqlCommand cmd  =   new  SqlCommand(sql, op.conn());
         try
         ... {
            cmd.Connection.Open();
            dr = cmd.ExecuteReader();
            while (dr.Read())
            ...{
                xml += "<news><id>" + dr["temp1"].ToString() + "</id><id2>" + dr["temp2"].ToString() + "</id2><id3>" +  dr["CreateTime"].ToString()    "</id3><id4>"+dr["id"].ToString()+"</id4></news>";
            }
            dr.Close();
            cmd.Connection.Close();
            return xml;
        }
         catch
         ... {
            return "0";
        }
    }
// 取记录数,与总页数的函数比较简单,自己写就是了.不再贴出.

 

到此为止,一个简单的交互,便实现了ajax的数据分页,其实很简单,当然我写的这个demo肯定有改进的方面.请大家指教.通过这个例子,希望有更多的人能够了解ajax的分页的一种实现方式,数据的返回我采用的是xml格式,网上也有很多使用json格式,完全可以根据自己的使用熟悉程度,用哪种数据格式并不是太重要.重点是理解ajax的实现模式.希望我写的实例能对大家有所帮助.