ajax 学习笔记之四 数据分页
来源:互联网 发布:淘宝子账号权重值 编辑:程序博客网 时间:2024/05/22 08:14
下面的实例是在从具体项目中摘出,我会尽量把用到的代码贴出来.让大家理解我的这种方式的分页.
如有不妥,请指正.
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);//调用第一页的数据.
}
...{
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";
}
}
//取记录数,与总页数的函数比较简单,自己写就是了.不再贴出.
...{
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的实现模式.希望我写的实例能对大家有所帮助.
- ajax 学习笔记之四 数据分页
- jQuery 学习笔记四 Ajax提交数据
- Ajax学习笔记(四)
- 数据分页显示学习笔记
- MVC 之 Ajax 分页查询数据
- Ajax学习笔记(1)--分页程序
- ajax 学习笔记之二 POST GET方式提交数据
- react 学习笔记之AJAX数据请求和使用
- 分页学习---AJAX分页
- 大数据学习笔记之四 MapReduce的核心思想
- 黑马程序员之 ASP.NET学习笔记:jquery+ajax无刷新分页代码
- 大数据学习笔记四
- 数据挖掘学习笔记四
- AJAX IN ACTION 学习笔记(四)
- jQuery学习笔记四(jQuery - AJAX)
- ajax,json学习笔记(四)跨域
- ajax 笔记--不用刷新实现数据的分页显示
- ajax 笔记--不用刷新实现数据的分页显示 (上)
- arcmap的内建命令 可以在vba的各个模块中调用
- 遍历文件, 包括子文件夹
- 利用JNI访问C/VC程序
- Microsoft Asp.Net Ajax框架入门(1) 初览
- ASP.NET页面事件:顺序与回传详解
- ajax 学习笔记之四 数据分页
- 绝对经典笑话
- web开发要注意的问题(转)
- TomCat 连接池
- innerHtml和innerText的用法
- Linux 下 tomcat 架设过程
- 行集不支持反向提取
- 小心题为:好久不见啦! 的邮件传播Trojan-PSW.Win32.Magania
- javascript cookies 存、取、删除实例