ASP实现静态无刷新分页效果

 #FormatTableID_0#

 

<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
%>

时间: 2024-08-03 13:43:29

ASP实现静态无刷新分页效果的相关文章

Json的Ajax无刷新分页效果

Json的Ajax无刷新分页效果 这一篇我讲接着写利用json读取数据以及和分页器绑定实现无刷新的分页效果 //根据当前页读取数据        function BindCommentList(page) {            $.post("/Ajax/Elec_Comment/GetData.asp教程x", { pid: '<%=DotNet.Framework.Common.QueryString.QId("id") %>', page:

asp.net jquery无刷新分页插件(jquery.pagination.js)_实用技巧

采用Jquery无刷新分页插件jquery.pagination.js 实现无刷新分页效果 友情提示:本示例Handler中采用StringBuilder的append方法追加HTML,小数据量可以,但是大数据或是布局常变,建议返回JSON格式的数据,性能和灵活性更好! 1.插件参数列表  2.页面内容: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Defaul

简单实现Ajax无刷新分页效果

Ajax无刷新分页效果,如下代码实现 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ajax无刷新分页效果</title> <script type="text/javascript"> function showpage(url) { var xhr = new XML

php+ajax实现无刷新分页_php技巧

本文实例讲述了php+ajax实现无刷新分页实现方法.分享给大家供大家参考.具体如下:     limit  偏移量,长度;     limit  0,7;   第一页     limit  7,7;   第二页     limit  14,7;  第三页每页信息条数:7 信息总条数:select count(*) from table 信息总页数:ceil向上取整(总条数/每页条数)1.分页类具体使用 <?php class Pagination { private $total; //数据表

一起谈.NET技术,ASP.NET MVC2.0在Tab页中实现异步无刷新分页

概述 很多地方都存在以Tab页来呈现数据的方式,比如网易.新浪.搜狐.QQ等知名的门户网站的首页,还有大家熟知的博客园首页,都是用了tab页来显示数据.大家之所以喜欢用Tab,因为它能大大的增加显示数据的空间,能在固定的空间中显示更多的数据.分页也是为了方便数据的显示,在应用系统中必不可少.这篇文章使用Jquery在ASP.NET MVC中使用Tab页,以及在Tab页中实现异步无刷新的分页功能.估计这个大家都会用得到的. 在ASP.NET MVC中实现分页,在之前的一篇博文:ASP.NET MV

asp.net中利用Jquery+Ajax+Json实现无刷新分页的实例代码

 本篇文章主要是对asp.net中利用Jquery+Ajax+Json实现无刷新分页的实例代码进行了介绍,需要的朋友可以过来参考下,需要对大家有所帮助  代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxJson.aspx.cs" Inherits="AjaxJson" %> <!DOCTYPE html PUBLIC &quo

ASP.NET无刷新分页简单实现_实用技巧

下面就是和大家分享的实现无刷新分页功能的全部步骤,欢迎学习. 1.新建一个分页存储过程: CREATE procedure [dbo].[P_Pager] (@PageNumber int, @PageSize int) as declare @sql nvarchar(4000) set @sql = 'select top ' + Convert(varchar, @PageSize) + ' * from T_Test where [type]=1 and id not in (selec

asp.net使用AJAX实现无刷新分页_实用技巧

查询功能是开发中最重要的一个功能,大量数据的显示,我们用的最多的就是分页. 在ASP.NET 中有很多数据展现的控件,比如Repeater.GridView,用的最多的GridView,它同时也自带了分页的功能.但是我们知道用GridView来显示数据,如果没有禁用ViewState,页面的大小会是非常的大的.而且平时我们点击首页,下一页,上一页,尾页这些功能都是会引起页面回发的,也就是需要完全跟服务器进行交互,来回响应的时间,传输的数据量都是很大的. AJAX的分页可以很好的解决这些问题. 数

ASP.NET AJAX:一步步打造漂亮的新闻列表(无刷新分页、内容预览)(3)

前面两个章节我们将需求分析和概要设计简单介绍了,接下来是重点的编代 码的阶段了(实现无刷新分页).在编写代码之前,一定要有计划的去编写代码 ,不能一开始啥也不管就开始编代码,除非你特牛. 我们来看一下需求分析: 3.==>无刷新的分页读取新闻列表,在点击下一页的时候触发事件,调用 ajax去数据库中查找下一页的数据并返回,然后显示在页面上. 这里面有两个事件,都是js事件,我们用jquery代码来实现. 分页的话,我们采用jquery的分页插件pagination,官方地址为 http://pl