Ajax分页

ajax分页技术，无刷新分页。
index.html
<script src="prototype.js"></script>
<script>
function get(page){
$("span2").innerHTML = "<img src='loading.gif' align='absmiddle'>"+"  "+"正在加载数据....";
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>Ａjax分页技术</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;"> </td>
      </tr>
    </table> </td>
</tr>
<tr>
    <td height="62" valign="top" bgcolor="#CCCCCC" style="padding:20px;font-size:12px;" id="span2">
 
</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
%>

发表评论取消回复

微信