代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>
Ajax + 存储过程 分页 - 无刷新 - Powered By Hapora
</title></head>
<body onload="Ajax()">
<form name="form1" method="post" action="Default.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNzgzNDMwNTMzZGSBxsHgWHzCHEf47/ZZ6eb1rs9vJg==" />
</div>
<div style="width:950px;text-align:center">
<a href="javascript:;" onclick="GetCount()">获取数据</a>
<a href="javascript:;" onclick="shouye()">首页</a>
<a href="javascript:;" onclick="shangye()">上一页</a>
<a href="javascript:;" onclick="xiaye()">下一页</a>
<a href="javascript:;" onclick="weiye()">尾页</a>
</div>
<div id="listcount" style="width:950px;height:auto;margin-top:10px;text-align:left"></div>
<div id="cpage" style="width:950px;height:auto;margin-top:10px;text-align:left"></div>
<div id="list" style="width:950px;height:auto;margin-top:10px;text-align:center">
</div>
</form>
</body>
<script type="text/javascript" language="javascript">
var cp=1;
var ps=8;
var list=document.getElementById("list");
var listcount=document.getElementById("listcount");
var cpage=document.getElementById("cpage");
var xmlHttp=false;
var xmlHttp2=false;
var pagesize=1;
var count=0;
listcount.innerHTML="请点击获取数据"; var flag=false; function Ajax()
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
xmlHttp=false;
}
}
if (!xmlHttp && typeof XMLHttpRequest!="undefind")
//xmlHttp=new XMLHttpRequest();
alert("您的浏览器不支持Ajax!")
try
{
xmlHttp2=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
try
{
xmlHttp2=new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
xmlHttp2=false;
}
}
if (!xmlHttp2 && typeof XMLHttpRequest!="undefind")
xmlHttp2=new XMLHttpRequest();
} function ShowList()
{
var url="Show.aspx?cp="+cp+"&ps="+ps;
xmlHttp.open("GET", url, true)
xmlHttp.onreadystatechange=Back;
xmlHttp.send(null);
} function Back()
{
if (xmlHttp.readystate==4)
{
var IsValid=xmlHttp.responseText;
//alert(IsValid)
//var start=IsValid.indexOf("<table")
//var end=IsValid.indexOf("</table>")
//end=end+8
//alert(end)
//IsValid=IsValid.substr(start,end)
list.innerHTML=IsValid
}
} function shouye()
{
if(flag)
{
if (cp==1)
{
alert("已经是第一页");
return false;
}
list.innerHTML="正在获取数据……"
cp=1;
ShowList();
CheckPage();
}
else
{
alert("请先获取数据");
}
} function shangye()
{
if(flag)
{
if (cp==1)
{
alert("已经是第一页");
return false;
}
list.innerHTML="正在获取数据……"
cp=cp-1;
ShowList();
CheckPage();
}
else
{
alert("请先获取数据");
}
} function xiaye()
{
if(flag)
{
if (cp==pagesize)
{
alert("已经是最后一页");
return false;
}
list.innerHTML="正在获取数据……"
cp=cp+1;
ShowList();
CheckPage();
}
else
{
alert("请先获取数据");
}
} function weiye()
{
if(flag)
{
if (cp==pagesize)
{
alert("已经是最后一页");
return false;
}
list.innerHTML="正在获取数据……"
cp=pagesize;
CheckPage();
ShowList();
}
else
{
alert("请先获取数据");
}
} function CheckPage()
{
var c=((cp-1)*ps)+1
cpage.innerHTML="当前是 "+c+" 至 "+cp*ps+" 当前第 "+cp+" 页";
}
function GetCount()
{
list.innerHTML="正在获取数据……"
var url="GetCount.aspx";
xmlHttp2.open("GET", url, true)
xmlHttp2.onreadystatechange=BackCount;
xmlHttp2.send(null);
ShowList();
CheckPage();
flag=true;
} function BackCount()
{
// if (xmlHttp.readystate==0)
// {
// listcount.innerHTML="请求未初始化";
// }
// if (xmlHttp.readystate==1)
// {
// listcount.innerHTML="请求已经建立，但是还没有发送";
// }
// if (xmlHttp.readystate==2)
// {
// listcount.innerHTML="请求已发送，正在处理中……";
// }
// if (xmlHttp.readystate==3)
// {
// listcount.innerHTML="请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。";
// }
if (xmlHttp2.readystate==4)
{
var count=xmlHttp2.responseText;
pagesize=parseInt(count/ps)
if (pagesize*ps<count)
pagesize=pagesize+1
listcount.innerHTML="共有<span style='color:#006699'>"+count+"</span>种商品。共有 "+pagesize+" 页";
}
else
{
//alert("status is " + xmlHttp2.readystate);
}
}
</script>
</html>
<head><title>
Ajax + 存储过程 分页 - 无刷新 - Powered By Hapora
</title></head>
<body onload="Ajax()">
<form name="form1" method="post" action="Default.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNzgzNDMwNTMzZGSBxsHgWHzCHEf47/ZZ6eb1rs9vJg==" />
</div>
<div style="width:950px;text-align:center">
<a href="javascript:;" onclick="GetCount()">获取数据</a>
<a href="javascript:;" onclick="shouye()">首页</a>
<a href="javascript:;" onclick="shangye()">上一页</a>
<a href="javascript:;" onclick="xiaye()">下一页</a>
<a href="javascript:;" onclick="weiye()">尾页</a>
</div>
<div id="listcount" style="width:950px;height:auto;margin-top:10px;text-align:left"></div>
<div id="cpage" style="width:950px;height:auto;margin-top:10px;text-align:left"></div>
<div id="list" style="width:950px;height:auto;margin-top:10px;text-align:center">
</div>
</form>
</body>
<script type="text/javascript" language="javascript">
var cp=1;
var ps=8;
var list=document.getElementById("list");
var listcount=document.getElementById("listcount");
var cpage=document.getElementById("cpage");
var xmlHttp=false;
var xmlHttp2=false;
var pagesize=1;
var count=0;
listcount.innerHTML="请点击获取数据"; var flag=false; function Ajax()
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
xmlHttp=false;
}
}
if (!xmlHttp && typeof XMLHttpRequest!="undefind")
//xmlHttp=new XMLHttpRequest();
alert("您的浏览器不支持Ajax!")
try
{
xmlHttp2=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
try
{
xmlHttp2=new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
xmlHttp2=false;
}
}
if (!xmlHttp2 && typeof XMLHttpRequest!="undefind")
xmlHttp2=new XMLHttpRequest();
} function ShowList()
{
var url="Show.aspx?cp="+cp+"&ps="+ps;
xmlHttp.open("GET", url, true)
xmlHttp.onreadystatechange=Back;
xmlHttp.send(null);
} function Back()
{
if (xmlHttp.readystate==4)
{
var IsValid=xmlHttp.responseText;
//alert(IsValid)
//var start=IsValid.indexOf("<table")
//var end=IsValid.indexOf("</table>")
//end=end+8
//alert(end)
//IsValid=IsValid.substr(start,end)
list.innerHTML=IsValid
}
} function shouye()
{
if(flag)
{
if (cp==1)
{
alert("已经是第一页");
return false;
}
list.innerHTML="正在获取数据……"
cp=1;
ShowList();
CheckPage();
}
else
{
alert("请先获取数据");
}
} function shangye()
{
if(flag)
{
if (cp==1)
{
alert("已经是第一页");
return false;
}
list.innerHTML="正在获取数据……"
cp=cp-1;
ShowList();
CheckPage();
}
else
{
alert("请先获取数据");
}
} function xiaye()
{
if(flag)
{
if (cp==pagesize)
{
alert("已经是最后一页");
return false;
}
list.innerHTML="正在获取数据……"
cp=cp+1;
ShowList();
CheckPage();
}
else
{
alert("请先获取数据");
}
} function weiye()
{
if(flag)
{
if (cp==pagesize)
{
alert("已经是最后一页");
return false;
}
list.innerHTML="正在获取数据……"
cp=pagesize;
CheckPage();
ShowList();
}
else
{
alert("请先获取数据");
}
} function CheckPage()
{
var c=((cp-1)*ps)+1
cpage.innerHTML="当前是 "+c+" 至 "+cp*ps+" 当前第 "+cp+" 页";
}
function GetCount()
{
cp
=1;list.innerHTML="正在获取数据……"
var url="GetCount.aspx";
xmlHttp2.open("GET", url, true)
xmlHttp2.onreadystatechange=BackCount;
xmlHttp2.send(null);
ShowList();
CheckPage();
flag=true;
} function BackCount()
{
// if (xmlHttp.readystate==0)
// {
// listcount.innerHTML="请求未初始化";
// }
// if (xmlHttp.readystate==1)
// {
// listcount.innerHTML="请求已经建立，但是还没有发送";
// }
// if (xmlHttp.readystate==2)
// {
// listcount.innerHTML="请求已发送，正在处理中……";
// }
// if (xmlHttp.readystate==3)
// {
// listcount.innerHTML="请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。";
// }
if (xmlHttp2.readystate==4)
{
var count=xmlHttp2.responseText;
pagesize=parseInt(count/ps)
if (pagesize*ps<count)
pagesize=pagesize+1
listcount.innerHTML="共有<span style='color:#006699'>"+count+"</span>种商品。共有 "+pagesize+" 页";
}
else
{
//alert("status is " + xmlHttp2.readystate);
}
}
</script>
</html>
测试可用