asp+ajax实现分页效果
建一个文件list.htm
<html>
<head>
<title>新闻列表简化型</title>
<script language="javascript">
<!--
//ajax 控件也可以做成单独文件方便到其它地方调用
function Ajax()
{
var xhrObj=null;
if(window.XMLHttpRequest)
{
xhrObj=new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
try{
xhrObj=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e1)
{
try{
xhrObj=new ActiveXObject("MSXML2.XMLHTTP");
}
catch(e2){
try{
xhrObj=new ActiveXObject("MSXML3.XMLHTTP");
}
catch(e3){
alert("创建Ajax失败："+e3)
}
}
}
}
else
{
alert("未能识别的浏览器");
}
return xhrObj;
}
function $(id)
{
return document.all[id];
}
</script>
<script language="javascript" defer>
var xhr=new Ajax();
var page=0;
var icount=0; //当前页数
var pagecount; //总页数
var count=0;
var ipagecount=0;
var ipagesize=5;; //每页显示记录数
var pp=0;
var ipage=0;
var Dom=null;
function getList(curPage)
{
if(ipagecount!=0)
{
ipage=parseInt((curPage-1)/ipagecount)+1;
}else{
ipage=1
};
page=curPage;
if (pp!=ipage)
{;
Dom=null;
pp=ipage;
xhr.open("get","data.asp?curpage="+pp,true);
xhr.onreadystatechange=$CallBack;
xhr.send(null);
}
else
{
$showList();
}
}
function $CallBack()
{
if(xhr.readystate==1)
{
$("newsList").innerHTML="正在连结服务器";
}
else if(xhr.readystate==2 || xhr.readystate==3)
{
$("newsList").innerHTML="正在读取数据";
}
else if(xhr.readystate==4)
{
if (xhr.status==200)
{
Dom=xhr.responseXML;
$showList();
}
}
}
function $showList()
{
var html="";
var items=Dom.selectNodes("//item");
icount=Dom.selectNodes("//item").length; //数量
count=Dom.selectSingleNode("//data").getAttribute("count"); //总数量
ipagecount=parseInt((icount-1)/ipagesize)+1;
pagecount=parseInt((count-1)/ipagesize)+1;
startPosition=(page-1)*ipagesize;
endPosition=(page*ipagesize)
if(endPosition>count)endPosition=count
for(var i=startPosition;i<endPosition;i++)
{
html+="<div id=/"title/"><a href=/""+items[i].selectSingleNode("htmlurl").text+"/">"+items[i].selectSingleNode("hits").text+"</a></div>";
}
$("newsList").innerHTML=html;
var statushtml="<a href=/"javascript:previousPage()/">上一页</a>|<a href=/"javascript:nextPage()/">下一页</a>";
if(pagecount<=10)
{
for(var i=1;i<=pagecount;i++)
{
if (i==page)
{
statushtml+="<b>"+i+"</b> "
}
else
{
statushtml+="<a href=/"javascript:turnPage("+i+")/">"+i+"</a> "
}
}
}
else if(page+10<pagecount && pagecount>10)
{
if(page%10==0)
{
for(var i=page-9;i<=page+1;i++)
{
if (i==page)
{
statushtml+="<b>"+i+"</b> "
}
else
{
statushtml+="<a href=/"javascript:turnPage("+i+")/">"+i+"</a> "
}
}
}
else if(page % 10 ==1 && page!=1)
{
for(var i=page-1;i<=page+10;i++)
{
if (i==page)
{
statushtml+="<b>"+i+"</b> "
}
else
{
statushtml+="<a href=/"javascript:turnPage("+i+")/">"+i+"</a> "
}
}
}
else if(page<=11)
{
for(var i=1;i<=11;i++)
{
if (i==page)
{
statushtml+="<b>"+i+"</b> "
}
else
{
statushtml+="<a href=/"javascript:turnPage("+i+")/">"+i+"</a> "
}
}
}
else
{
for(var i=(page-(page % 10));i<=page+(10-(page % 10))+1;i++)
{
if (i==page)
{
statushtml+="<b>"+i+"</b> "
}
else
{
statushtml+="<a href=/"javascript:turnPage("+i+")/">"+i+"</a> "
}
}
}
}
else if(page+10>=pagecount && pagecount>10)
{
if(page%10==0)
{
for(var i=page-9;i<=page+1;i++)
{
if (i==page)
{
statushtml+="<b>"+i+"</b> "
}
else
{
statushtml+="<a href=/"javascript:turnPage("+i+")/">"+i+"</a> "
}
}
}
else if(page % 10 ==1 && page!=1)
{
for(var i=page-1;i<=page+9;i++)
{
if (i==page)
{
statushtml+="<b>"+i+"</b> "
}
else
{
statushtml+="<a href=/"javascript:turnPage("+i+")/">"+i+"</a> "
}
}
}
}
document.getElementById("pagestatus").innerHTML=statushtml;
}
function previousPage()
{
if (page>1)
{
getList(page-1);
}
else
{
alert("已经是第一页了");
}
}
function nextPage()
{
if(page<ipagecount)
{
getList(page+1);
}
else
{
alert("已经到最后一页了");
}
}
function turnPage(p)
{
getList(p);
}
getList(1);
</script>
</head>
<body>
<div id="newsList"></div>
<div id="pagestatus"></div>
</body>
</html>
建一个文件data.asp
注：这里我用的是ACCESS数据库，库名叫data.mdb，当然这个自己可以定义，库中表名为info字段分别是id(自动编号)、a、b、c、d(日期类型)
<%@ Language="VBSCRIPT" codepage="936" %>
<%
response.cachecontrol="no-cache"
response.addHeader "pragma","no-cache"
response.expires=-1
response.expiresAbsolute=now-1
response.contentType="text/xml"
'SQL数据库 Set conn=server.CreateObject("adodb.connection")
'sconn="driver={sql server};server=(local);uid=**;pwd=**;database=***"
'conn.open sconn
set conn=server.CreateObject("adodb.connection")
file=server.mappath("data.mdb")
conn.Open "driver={microsoft access driver (*.mdb)};"&"dbq="&file%>
<?xml version="1.0" encoding="gb2312" ?>
<%
dim iPagesize,rs,sSQL,iCurPage,ipresize,icount,ipagecount
icurpage=trim(request.QueryString("curpage"))
iPagesize=500 '页大小
set rs=server.createObject("adodb.recordset")
'rs.open "select count(id) from ca_news where status=1",conn,1,1
rs.open "select count(id) from info",conn,1,1
icount=rs(0) '总记录数
rs.close
ipagecount=int((icount-1)/iPagesize)+1 '总页数
if icurpage="" then
icurpage=1
else
icurpage=cint(icurpage)
end if
if icurpage<1 then
icurpage=1
end if
if icurPage>ipagecount then icurpage=ipagecount
ipreSize=(iCurPage-1)*ipagesize
if ipresize=0 then
sSQL="select * from info order by id desc"
else
' sSQL="select top "&ipagesize&" id,title,postdate,hits,htmlurl from news where status=1 and id not in (select top "&ipresize&" id from news where status=1 order by id asc) order by id asc"
sSQL="select top "&ipagesize&" * from info id not in (select top "&ipresize&" id from info order by id desc) order by id desc"
end if
rs.open sSQL,conn,1,1
%>
<data count="<%=icount%>" pagesize="<%=ipagesize %>" pagecount="<%=ipagecount%>">
<%
while not rs.eof
%>
<item id="<%=rs("id")%>">
<title><![CDATA[<%=rs("a")%>]]></title>
<htmlurl><![CDATA[<%=rs("b")%>]]></htmlurl>
<postdate><%=DateValue(rs("d")) %></postdate>
<hits><%=trim(rs("c")) %></hits>
</item>
<%
rs.movenext
wend
%>
</data>
<%
rs.close
set rs=nothing
conn.close
set conn=nothing
%>
<html>
<head>
<title>新闻列表简化型</title>
<script language="javascript">
<!--
//ajax 控件也可以做成单独文件方便到其它地方调用
function Ajax()
{
var xhrObj=null;
if(window.XMLHttpRequest)
{
xhrObj=new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
try{
xhrObj=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e1)
{
try{
xhrObj=new ActiveXObject("MSXML2.XMLHTTP");
}
catch(e2){
try{
xhrObj=new ActiveXObject("MSXML3.XMLHTTP");
}
catch(e3){
alert("创建Ajax失败："+e3)
}
}
}
}
else
{
alert("未能识别的浏览器");
}
return xhrObj;
}
function $(id)
{
return document.all[id];
}
</script>
<script language="javascript" defer>
var xhr=new Ajax();
var page=0;
var icount=0; //当前页数
var pagecount; //总页数
var count=0;
var ipagecount=0;
var ipagesize=5;; //每页显示记录数
var pp=0;
var ipage=0;
var Dom=null;
function getList(curPage)
{
if(ipagecount!=0)
{
ipage=parseInt((curPage-1)/ipagecount)+1;
}else{
ipage=1
};
page=curPage;
if (pp!=ipage)
{;
Dom=null;
pp=ipage;
xhr.open("get","data.asp?curpage="+pp,true);
xhr.onreadystatechange=$CallBack;
xhr.send(null);
}
else
{
$showList();
}
}
function $CallBack()
{
if(xhr.readystate==1)
{
$("newsList").innerHTML="正在连结服务器";
}
else if(xhr.readystate==2 || xhr.readystate==3)
{
$("newsList").innerHTML="正在读取数据";
}
else if(xhr.readystate==4)
{
if (xhr.status==200)
{
Dom=xhr.responseXML;
$showList();
}
}
}
function $showList()
{
var html="";
var items=Dom.selectNodes("//item");
icount=Dom.selectNodes("//item").length; //数量
count=Dom.selectSingleNode("//data").getAttribute("count"); //总数量
ipagecount=parseInt((icount-1)/ipagesize)+1;
pagecount=parseInt((count-1)/ipagesize)+1;
startPosition=(page-1)*ipagesize;
endPosition=(page*ipagesize)
if(endPosition>count)endPosition=count
for(var i=startPosition;i<endPosition;i++)
{
html+="<div id=/"title/"><a href=/""+items[i].selectSingleNode("htmlurl").text+"/">"+items[i].selectSingleNode("hits").text+"</a></div>";
}
$("newsList").innerHTML=html;
var statushtml="<a href=/"javascript:previousPage()/">上一页</a>|<a href=/"javascript:nextPage()/">下一页</a>";
if(pagecount<=10)
{
for(var i=1;i<=pagecount;i++)
{
if (i==page)
{
statushtml+="<b>"+i+"</b> "
}
else
{
statushtml+="<a href=/"javascript:turnPage("+i+")/">"+i+"</a> "
}
}
}
else if(page+10<pagecount && pagecount>10)
{
if(page%10==0)
{
for(var i=page-9;i<=page+1;i++)
{
if (i==page)
{
statushtml+="<b>"+i+"</b> "
}
else
{
statushtml+="<a href=/"javascript:turnPage("+i+")/">"+i+"</a> "
}
}
}
else if(page % 10 ==1 && page!=1)
{
for(var i=page-1;i<=page+10;i++)
{
if (i==page)
{
statushtml+="<b>"+i+"</b> "
}
else
{
statushtml+="<a href=/"javascript:turnPage("+i+")/">"+i+"</a> "
}
}
}
else if(page<=11)
{
for(var i=1;i<=11;i++)
{
if (i==page)
{
statushtml+="<b>"+i+"</b> "
}
else
{
statushtml+="<a href=/"javascript:turnPage("+i+")/">"+i+"</a> "
}
}
}
else
{
for(var i=(page-(page % 10));i<=page+(10-(page % 10))+1;i++)
{
if (i==page)
{
statushtml+="<b>"+i+"</b> "
}
else
{
statushtml+="<a href=/"javascript:turnPage("+i+")/">"+i+"</a> "
}
}
}
}
else if(page+10>=pagecount && pagecount>10)
{
if(page%10==0)
{
for(var i=page-9;i<=page+1;i++)
{
if (i==page)
{
statushtml+="<b>"+i+"</b> "
}
else
{
statushtml+="<a href=/"javascript:turnPage("+i+")/">"+i+"</a> "
}
}
}
else if(page % 10 ==1 && page!=1)
{
for(var i=page-1;i<=page+9;i++)
{
if (i==page)
{
statushtml+="<b>"+i+"</b> "
}
else
{
statushtml+="<a href=/"javascript:turnPage("+i+")/">"+i+"</a> "
}
}
}
}
document.getElementById("pagestatus").innerHTML=statushtml;
}
function previousPage()
{
if (page>1)
{
getList(page-1);
}
else
{
alert("已经是第一页了");
}
}
function nextPage()
{
if(page<ipagecount)
{
getList(page+1);
}
else
{
alert("已经到最后一页了");
}
}
function turnPage(p)
{
getList(p);
}
getList(1);
</script>
</head>
<body>
<div id="newsList"></div>
<div id="pagestatus"></div>
</body>
</html>
建一个文件data.asp
注：这里我用的是ACCESS数据库，库名叫data.mdb，当然这个自己可以定义，库中表名为info字段分别是id(自动编号)、a、b、c、d(日期类型)
<%@ Language="VBSCRIPT" codepage="936" %>
<%
response.cachecontrol="no-cache"
response.addHeader "pragma","no-cache"
response.expires=-1
response.expiresAbsolute=now-1
response.contentType="text/xml"
'SQL数据库 Set conn=server.CreateObject("adodb.connection")
'sconn="driver={sql server};server=(local);uid=**;pwd=**;database=***"
'conn.open sconn
set conn=server.CreateObject("adodb.connection")
file=server.mappath("data.mdb")
conn.Open "driver={microsoft access driver (*.mdb)};"&"dbq="&file%>
<?xml version="1.0" encoding="gb2312" ?>
<%
dim iPagesize,rs,sSQL,iCurPage,ipresize,icount,ipagecount
icurpage=trim(request.QueryString("curpage"))
iPagesize=500 '页大小
set rs=server.createObject("adodb.recordset")
'rs.open "select count(id) from ca_news where status=1",conn,1,1
rs.open "select count(id) from info",conn,1,1
icount=rs(0) '总记录数
rs.close
ipagecount=int((icount-1)/iPagesize)+1 '总页数
if icurpage="" then
icurpage=1
else
icurpage=cint(icurpage)
end if
if icurpage<1 then
icurpage=1
end if
if icurPage>ipagecount then icurpage=ipagecount
ipreSize=(iCurPage-1)*ipagesize
if ipresize=0 then
sSQL="select * from info order by id desc"
else
' sSQL="select top "&ipagesize&" id,title,postdate,hits,htmlurl from news where status=1 and id not in (select top "&ipresize&" id from news where status=1 order by id asc) order by id asc"
sSQL="select top "&ipagesize&" * from info id not in (select top "&ipresize&" id from info order by id desc) order by id desc"
end if
rs.open sSQL,conn,1,1
%>
<data count="<%=icount%>" pagesize="<%=ipagesize %>" pagecount="<%=ipagecount%>">
<%
while not rs.eof
%>
<item id="<%=rs("id")%>">
<title><![CDATA[<%=rs("a")%>]]></title>
<htmlurl><![CDATA[<%=rs("b")%>]]></htmlurl>
<postdate><%=DateValue(rs("d")) %></postdate>
<hits><%=trim(rs("c")) %></hits>
</item>
<%
rs.movenext
wend
%>
</data>
<%
rs.close
set rs=nothing
conn.close
set conn=nothing
%>