Ajax分页

发布时间:2007-10-25 22:38:00 阅读:1201次

 ajax分页技术,无刷新分页。
index.html
<script src="prototype.js"></script>
<script>
function get(page){
$("span2").innerHTML = "<img src='loading.gif' align='absmiddle'>"+"&nbsp;&nbsp;"+"正在加载数据....";
var url = "data.asp";
var pars ='topage='+page+'&fresh='+Math.random();
var myAjax = new Ajax.Request(url,{method: 'get', parameters: pars, onComplete: function (originalRequest){
$("span1").innerHTML = originalRequest.responseText;
$("span2").innerHTML = "";
}});
}
</script>
<style  type="text/css">
a:link{
color:#000000;
text-decoration:none;
}
a:hover{
color:#000000;
text-decoration:none;
border-bottom:1px dashed #000000
}
a:visited{
color:#ff0000;
text-decoration:none;
}
a:link{
color:#000000;
text-decoration:none;
}
</style>
<title>Ajax分页技术</title>
<body onLoad="get(1)">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="41%" height="143" valign="top" bgcolor="#CCCCCC" style="padding:20px;font-size:12px;">
      <p>   Ajax实现无刷新的数据分页,效果好好。Ajax实现无刷新的数据分页,效果好好。Ajax实现无刷新的数据分页,效果好好。Ajax实现无刷新的数据分页,效果好好。Ajax实现无刷新的数据分页,效果好好。Ajax实现无刷新的数据分页,效果好好。Ajax实现无刷新的数据分页,效果好好。Ajax实现无刷新的数据分页,效果好好。Ajax实现无刷新的数据分页,效果好好。Ajax实现无刷新的数据分页,效果好好。Ajax实现无刷新的数据分页,效果好好。Ajax实现无刷新的数据分页,效果好好。Ajax实现无刷新的数据分页,效果好好。Ajax实现无刷新的数据分页,效果好好。Ajax实现无刷新的数据分页,效果好好。Ajax实现无刷新的数据分页,效果好好。Ajax实现无刷新的数据分页,效果好好。Ajax实现无刷新的数据分页,效果好好。Ajax实现无刷新的数据分页,效果好好。Ajax实现无刷新的数据分页,效果好好。Ajax实现无刷新的数据分页,效果好好。Ajax实现无刷新的数据分页,效果好好。Ajax实现无刷新的数据分页,效果好好。Ajax实现无刷新的数据分页,效果好好。Ajax实现无刷新的数据分页,效果好好。Ajax实现无刷新的数据分页,效果好好。</p>
    </td>
    <td width="59%" rowspan="2" valign="top" >
 <table width="100%" height="347" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td height="347" valign="top" id="span1" style="font-size:12px;">&nbsp;</td>
      </tr>
    </table> </td>
  </tr>
  <tr>
    <td height="62" valign="top" bgcolor="#CCCCCC" style="padding:20px;font-size:12px;" id="span2">
 &nbsp;
 </td>
  </tr>
</table>
data.asp
<%response.Charset="utf-8"%>
<%
Response.CodePage=65001
Response.Charset="utf-8"
%>
<%
set cn=server.createobject("adodb.connection")
cn.open "provider=microsoft.jet.oledb.4.0;data source="&server.mappath("data.mdb")
set rs=server.createobject("adodb.recordset")
%>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#999999" style="padding:5px;font-size:12px;">
<%
 sql="Select *from information order by id asc"
 rs.open sql,cn,1,3
 rs.pagesize=8
 if not isempty(request("topage")) then
 topage=cint(request("topage"))
 if topage >= rs.pagecount then
 rs.absolutepage=rs.pagecount
 elseif topage <=0 then
 rs.absolutepage =1
 else
 rs.absolutepage=topage
 end if
 end if
 intcurpage=rs.absolutepage
 p=1
  %>
  <tr>
    <td width="260" height="25" align="center" valign="middle" bgcolor="#FFFFFF">标题</td>
    <td width="727" height="25" align="center" valign="middle" bgcolor="#FFFFFF">日期</td>
  </tr>
  
    <%
 for i=1 to rs.pagesize
 if rs.eof then
 exit for
 end if
 p=p+1
 %>
  <tr bgcolor=<%if p mod 2=0 then%>"#CCCCCC"<%else%>"#FFFFFF"<%end if%>>
    <td width="260" height="25" align="center" valign="middle" class="title_pad">
 <%if len(rs("title"))>15 then%>
 <%=left(rs("title"),15)%>
 <%else%>
 <%=rs("title")%>
 <%end if%> </td>
    <td width="727" height="25" align="center" valign="middle"><%=rs("datetime")%></td>
  </tr>
    <%
 rs.movenext
 next
 %>
 
  </form>
  <tr>
    <td height="25" colspan="2" align="center" valign="middle" bgcolor="#FFFFFF">
 <% If rs.recordcount>rs.pagesize Then %>
  <% if topage=1 or request("topage")="" then %>
 [首页] [上一页]
   <% Else %>
 [<a href="javascript:get(1)">首页</a>] [<a href="javascript:get(<%=intcurpage-1%>)" >上一页</a>]
 <% End If %>
 <% if topage=rs.pagecount then %>
 [下一页] [尾页]
 <% Else %>
 [<a href="javascript:get(<%=intcurpage+1%>)">下一页</a>]
  [<a href="javascript:get(<%=rs.pagecount%>)">尾页</a>]
  <% End If %>
 当前第<%=intcurpage%></span>/<%=rs.pagecount%>共:<%=rs.recordcount%>页
 <% End If %>
<select id="pages" onchange="get(this.value)">
<%for kk=1 to rs.pagecount%>
<option value=<%=kk%><%if topage=kk then%> selected="selected" <%end if%>><%=kk%></option>
<%next%>
</select>
 </td>
  </tr>
</table>
<%
rs.close
set rs=nothing
%>

如有问题,可以QQ搜索群1028468525加入群聊,欢迎一起研究技术

支付宝 微信

有疑问联系站长,请联系QQ:QQ咨询
上一篇:ajax跳转
下一篇:返回顶部js

转载请注明:Ajax分页 出自老鄢博客 | 欢迎分享