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>&nbsp;"
 }
else
{
 statushtml+="<a href=/"javascript:turnPage("+i+")/">"+i+"</a>&nbsp;"
}
 }
 }
 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>&nbsp;"
 }
 else
 {
 statushtml+="<a href=/"javascript:turnPage("+i+")/">"+i+"</a>&nbsp;"
 }
}
 }
 else if(page % 10 ==1 && page!=1)
 {
 for(var i=page-1;i<=page+10;i++)
{
 if (i==page)
 {
 statushtml+="<b>"+i+"</b>&nbsp;"
 }
 else
 {
 statushtml+="<a href=/"javascript:turnPage("+i+")/">"+i+"</a>&nbsp;"
 }
}
 }
 else if(page<=11)
 {
 for(var i=1;i<=11;i++)
 {
 if (i==page)
 {
 statushtml+="<b>"+i+"</b>&nbsp;"
 }
 else
 {
 statushtml+="<a href=/"javascript:turnPage("+i+")/">"+i+"</a>&nbsp;"
 }
 }
 }
 else
 {
 for(var i=(page-(page % 10));i<=page+(10-(page % 10))+1;i++)
{
 if (i==page)
 {
 statushtml+="<b>"+i+"</b>&nbsp;"
 }
 else
 {
 statushtml+="<a href=/"javascript:turnPage("+i+")/">"+i+"</a>&nbsp;"
 }
}
 }
 }
 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>&nbsp;"
 }
 else
 {
 statushtml+="<a href=/"javascript:turnPage("+i+")/">"+i+"</a>&nbsp;"
 }
}
 }
 else if(page % 10 ==1 && page!=1)
 {
 for(var i=page-1;i<=page+9;i++)
{
 if (i==page)
 {
 statushtml+="<b>"+i+"</b>&nbsp;"
 }
 else
 {
 statushtml+="<a href=/"javascript:turnPage("+i+")/">"+i+"</a>&nbsp;"
 }
}
 }
 }
 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>&lt;![CDATA[<%=rs("a")%>]]&gt;</title>
<htmlurl>&lt;![CDATA[<%=rs("b")%>]]&gt;</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
%>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
<script language="javascript" type="text/javascript"> <!-- function createAjax() { //该函数将返回XMLHTTP对象实例 var _xmlhttp; try { _xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); //IE的创建方式 } catch (e) { try { _xmlhttp=new XMLHttpRequest(); //FF等浏览器的创建方式 } catch (e) { _xmlhttp=false; //如果创建失败,将返回false } } return _xmlhttp; //返回xmlhttp对象实例 } function getweblist(page) { //该函数用来获取分页数据 var xmlhttp=createAjax(); //创建变量xmlhttp,并将createAjax()函数创建的对象实例赋于它 if (xmlhttp) { //如果xmlhttp对象创建成功,则执行条件语句中的程序 var content=document.getElementById('content'); //获取页面中id为content的对象 xmlhttp.open('get','server.asp?page='+page+'&n='+Math.random(),true); //打开与服务器的连接,其中get为连接方式,server.asp为要连接的页面,有两个参数,其中第一个参数page为需要返回数据的页数,第二个参数n为一个随机数,这样每次发送的URL都会不一样,相当于都向服务器发出一个新的请求,避免浏览器缓存数据。 xmlhttp.onreadystatechange=function() { //为xmlhttp对象的readyState属性指定事件,改属性值改变时,则会执行其中的程序 if (xmlhttp.readyState==4 && xmlhttp.status==200) { //如果xmlhttp.readyState==4并且xmlhttp.status==200时,执行条件中的程序,其中readyState有五个值,4为请求完成,是客户端向服务器提交的数据成功到达,status有N多值-_-!!,其中200为OK,是指服务器向客户端完成发送数据。 content.innerHTML=unescape(xmlhttp.responseText); //将服务器返回的数据解码并写入指定的ID中。 } else { content.innerHTML='<span style="color:red">正在从服务器提取数据......</span>'; //如果服务器没有完成传送,则向用户提示正在传输。 } } xmlhttp.send(null); //向服务器发送请求,因为是get请求,会直接附在URL后面,所以这里括号中的数据为null,IE中也可以不写,但FF就必须加上null,否则会发送失败。 } } function edit() { //编辑分页显示条数的函数 var str='<form style="margin:0">每页显示 <input type="text" id="pagesize" size="3"> 条 <input type="button" id="savebtn" value="保存" onclick="save()"> <input type="button" id="cancelbtn" value="取消" onclick="rightinfo()"></form>' //定义html字符串 var right=document.getElementById('right'); //获得页面中的right对象。 right.innerHTML=str; //将str变量的值写入该对象中。 } function rightinfo() { //right对象中的原始信息,请在页面开始和被显示条数被修改后调用 document.getElementById('right').innerHTML='<a href="javascript:void(edit())" title="修改每页显示条数">Edit</a>'; } function save() { //保存修改后的显示条数 var pagesize=document.getElementById('pagesize'); //这个就不写了,跟上面的用法一样。 if (pagesize.value==''||/[0-9]+/.test(pagesize.value)==false) { //确定用户输入的新数据是不是一个数字 alert("请正确填写每页显示条数! "); return; } var xmlhttp=createAjax(); //创建对象 if (xmlhttp) { xmlhttp.open('get','set.asp?pagesize='+pagesize.value+'&n='+Math.random(),true) //参上同看 xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById('right').innerHTML=unescape(xmlhttp.responseText); //先写入从服务器返回的字符串,如果成功,会写入completed。 getweblist(1); //从新获取新修改后的第一页的数据 setTimeout('rightinfo()',3000); //3秒后将right对象的原始字符串写入。 } else { document.getElementById('pagesize').disabled=true; //将几个FORM表单的元素都设为不可改动 document.getElementById('savebtn').disabled=true; document.getElementById('cancelbtn').disabled=true; } } xmlhttp.send(null); //发送请求。 } } //--> </script>
Asp+AJAX静态分页 亲测 可用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Asp+AJAX静态分页</title> <style type="text/css"> <!-- body { text-align:center;font:14px Verdana,sans-serif; } a:link,a:visited { color:#00f;text-decoration:none; } a:hover { color:#f00;text-decoration:underline; } #main { width:450px;background:#f2f2f2;border:1px #999 solid;padding:10px;text-align:left;line-height:150%;margin:0 auto; } #title { width:100%;line-height:30px;border-bottom:1px #999 solid;display:table; } #left { float:left;width:50%;text-align:left;font-size:14px;font-weight:bold; } #right { float:left;width:50%;text-align:right; } #content { width:100%;margin:10px 0;clear:both; } #download { width:100%;margin:10px 0;line-height:150%; } --> </style> [removed] <!-- function createAjax() { //该函数将返回XMLHTTP对象实例 var _xmlhttp; try { _xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); //IE的创建方式 } catch (e) { try { _xmlhttp=new XMLHttpRequest(); //FF等浏览器的创建方式 } catch (e) { _xmlhttp=false; //如果创建失败,将返回false } } return _xmlhttp; //返回xmlhttp对象实例 } function getweblist(page) { //该函数用来获取分页数据 var xmlhttp=createAjax(); //创建变量xmlhttp,并将createAjax()函数创建的对象实例赋于它 if (xmlhttp) { //如果xmlhttp对象创建成功,则执行条件语句中的程序 var content=document.getElementById('content'); //获取页面中id为content的对象 xmlhttp.open('get','server.asp?page='+page+'&n='+Math.random(),true); //打开与服务器的连接,其中get为连接方式,server.asp为要连接的页面,有两个参数,其中第一个参数page为需要返回数据的页数,第二个参数n为一个随机数,这样每次发送的URL都会不一样,相当于都向服务器发出一个新的请求,避免浏览器缓存数据。 xmlhttp.onreadystatechange=function() { //为xmlhttp对象的readyState属性指定事件,改属性值改变时,则会执行其中的程序 if (xmlhttp.readyState==4 && xmlhttp.status==200) { //如果xmlhttp.readyState==4并且xmlhttp.status==200时,执行条件中的程序,其中readyState有五个值,4为请求完成,是客户端向服务器提交的数据成功到达,status有N多值-_-!!,其中200为OK,是指服务器向客户端完成发送数据。 content[removed]=unescape(xmlhttp.responseText); //将服务器返回的数据解码并写入指定的ID中。 } else { content[removed]='<span>正在从服务器提取数据......</span>'; //如果服务器没有完成传送,则向用户提示正在传输。 } } xmlhttp.send(null); //向服务器发送请求,因为是get请求,会直接附在URL后面,所以这里括号中的数据为null,IE中也可以不写,但FF就必须加上null,否则会发送失败。 } } function edit() { //编辑分页显示条数的函数 var str='<form style="margin:0">每页显示 <input type="text" id="pagesize" size="3"> 条 <input type="button" id="savebtn" value="保存" onclick="save()"> <input type="button" id="cancelbtn" value="取消" onclick="rightinfo()"></form>' //定义html字符串 var right=document.getElementById('right'); //获得页面中的right对象。 right[removed]=str; //将str变量的值写入该对象中。 } function rightinfo() { //right对象中的原始信息,请在页面开始和被显示条数被修改后调用 document.getElementById('right')[removed]='<a href="[removed]void(edit())" title="修改每页显示条数">Edit</a>'; } function save() { //保存修改后的显示条数 var pagesize=document.getElementById('pagesize'); //这个就不写了,跟上面的用法一样。 if (pagesize.value==''||/[0-9]+/.test(pagesize.value)==false) { //确定用户输入的新数据是不是一个数字 alert("请正确填写每页显示条数! "); return; } var xmlhttp=createAjax(); //创建对象 if (xmlhttp) { xmlhttp.open('get','set.asp?pagesize='+pagesize.value+'&n='+Math.random(),true) //参上同看 xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById('right')[removed]=unescape(xmlhttp.responseText); //先写入从服务器返回的字符串,如果成功,会写入completed。 getweblist(1); //从新获取新修改后的第一页的数据 setTimeout('rightinfo()',3000); //3秒后将right对象的原始字符串写入。 } else { document.getElementById('pagesize').disabled=true; //将几个FORM表单的元素都设为不可改动 document.getElementById('savebtn').disabled=true; document.getElementById('cancelbtn').disabled=true; } } xmlhttp.send(null); //发送请求。 } } //--> [removed] </head> <body> <div id="main"> <div id="title"> <div id="left">Asp+AJAX静态分页</div> <div id="right"></div> </div> <div id="content"></div> </div> </body> </html>

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值