Web编程

Javascript+ASP打造无刷新新闻列表(续)

编辑:dnawo 日期:2007-01-19

字体大小: 小中大

上次用Javascript+ASP实现了无刷新的新闻列表，最后还有一个小问题没有解决：下边的分页数列"首页、上10页、下10页、尾页"间怎么切换？你应该不会想用传统的方法用ASP进行查询然后显示数列吧？那我们之前对无刷新所做的努力可就全白费了！你首先应该想到的是再用Javascript+ASP实现无刷新显示数列，但这次我们也不用这个，我们有更简单的方法。

使用Javascript+ASP来显示分页数列的话那切换一次就得重新查询一次数据库，完全没有必要！我们只需在打开新闻列表页时查询一次数据库，将总页数保存起来(比如保存在一个隐藏的表单中)，以后列表的切换工作就交给Javascript了，还是Javascript+ASP，不过本质不一样了哦，先前是同步，这次是异步了。

实现方法：

1.在页面中新建两个隐藏的表单域，其中一个用于存放当前列表的最后一项，另一个用于存放总页数：
<input name="endid" id="endid" type="hidden" value="0">
<input name="countpage" id="countpage" type="hidden" value="0">

2.新建div标签用于存放分页数列：
<div id="pageNews"></div>

3.加入Javascript脚本：

复制内容到剪贴板

程序代码

//首页
function first(){
    var table,endid,countpage,i;
    endid = parseInt(document.getElementById("endid").value);
    countpage = parseInt(document.getElementById("countpage").value);
    table = "<table height='20' border='0' align='center' cellpadding='0' cellspacing='0'><tr>";
    table += "<td width='20' align='center' valign='middle'><a href='javascript:first();'><img src='images/First.gif' width='9' height='8' border='0' title='首页'></a></td>";
    if(countpage<=10){
        for(i=1;i<=countpage;i++){
            table += "<td width='20' align='center' valign='middle'><a href='javascript:showpage(" + i + ");'>" + i + "</a></td>";
        }
        document.getElementById("endid").value = countpage;
    }else{
        for(i=1;i<=10;i++){
            table += "<td width='20' align='center' valign='middle'><a href='javascript:showpage(" + i + ");'>" + i + "</a></td>";
        }
        document.getElementById("endid").value = "10";
        table += "<td width='20' align='center' valign='middle'><a href='javascript:next();'><img src='images/Next.gif' width='8' height='8' border='0'title='下10页'></a></td>"
    }
    table += "<td width='20' align='center' valign='middle'><a href='javascript:last();'><img src='images/Last.gif' width='9' height='8' border='0'title='尾页'></a></td>";
    table += "</tr></table>";
    document.getElementById("pageNews").innerHTML = table;
}

//上10页
function previous(){
    var table,endid,countpage,i;
    endid = parseInt(document.getElementById("endid").value);
    countpage = parseInt(document.getElementById("countpage").value);
    table = "<table height='20' border='0' align='center' cellpadding='0' cellspacing='0'><tr>";
    table += "<td width='20' align='center' valign='middle'><a href='javascript:first();'><img src='images/First.gif' width='9' height='8' border='0' title='首页'></a></td>";
    if(endid-20<1){
        for(i=1;i<=10;i++){
            table += "<td width='20' align='center' valign='middle'><a href='javascript:showpage(" + i + ");'>" + i + "</a></td>";
        }
        document.getElementById("endid").value = "10";
        table += "<td width='20' align='center' valign='middle'><a href='javascript:next();'><img src='images/Next.gif' width='8' height='8' border='0'title='下10页'></a></td>"
    }else{
        table += "<td width='20' align='center' valign='middle'><a href='javascript:previous();'><img src='images/Previous.gif' width='8' height='8' border='0'title='上10页'></a></td>";
        for(i = endid-19;i<= endid-10;i++){
            table += "<td width='20' align='center' valign='middle'><a href='javascript:showpage(" + i + ");'>" + i + "</a></td>";
        }
        document.getElementById("endid").value = endid-10;
        table += "<td width='20' align='center' valign='middle'><a href='javascript:next();'><img src='images/Next.gif' width='8' height='8' border='0'title='下10页'></a></td>"
    }
    table += "<td width='20' align='center' valign='middle'><a href='javascript:last();'><img src='images/Last.gif' width='9' height='8' border='0'title='尾页'></a></td>";
    table += "</tr></table>";
    document.getElementById("pageNews").innerHTML = table;
}

//下10页
function next(){
    var endid,table,countpage,i;
    endid = parseInt(document.getElementById("endid").value);
    countpage = parseInt(document.getElementById("countpage").value);
    table = "<table height='20' border='0' align='center' cellpadding='0' cellspacing='0'><tr>";
    table += "<td width='20' align='center' valign='middle'><a href='javascript:first();'><img src='images/First.gif' width='9' height='8' border='0' title='首页'></a></td>";
    if(endid + 10>countpage){
        table += "<td width='20' align='center' valign='middle'><a href='javascript:previous();'><img src='images/Previous.gif' width='8' height='8' border='0'title='上10页'></a></td>";
        for(i=endid + 1;i<=countpage;i++){
            table += "<td width='20' align='center' valign='middle'><a href='javascript:showpage(" + i + ");'>" + i + "</a></td>";
        }
        document.getElementById("endid").value = countpage;
    }else{
        table += "<td width='20' align='center' valign='middle'><a href='javascript:previous();'><img src='images/Previous.gif' width='8' height='8' border='0'title='上10页'></a></td>";
        for(i=endid + 1;i<=endid + 10;i++){
            table += "<td width='20' align='center' valign='middle'><a href='javascript:showpage(" + i + ");'>" + i + "</a></td>";
        }
        document.getElementById("endid").value = endid + 10;
        table += "<td width='20' align='center' valign='middle'><a href='javascript:next();'><img src='images/Next.gif' width='8' height='8' border='0'title='下10页'></a></td>"
    }
    table += "<td width='20' align='center' valign='middle'><a href='javascript:last();'><img src='images/Last.gif' width='9' height='8' border='0'title='尾页'></a></td>";
    table += "</tr></table>";
    document.getElementById("pageNews").innerHTML = table;
}

//尾页
function last(){
    var table,endid,countpage,i;
    endid = parseInt(document.getElementById("endid").value);
    countpage = parseInt(document.getElementById("countpage").value);
    table = "<table height='20' border='0' align='center' cellpadding='0' cellspacing='0'><tr>";
    table += "<td width='20' align='center' valign='middle'><a href='javascript:first();'><img src='images/First.gif' width='9' height='8' border='0' title='首页'></a></td>";
    if(countpage<=10){
        for(i=1;i<=countpage;i++){
            table += "<td width='20' align='center' valign='middle'><a href='javascript:showpage(" + i + ");'>" + i + "</a></td>";
        }
        document.getElementById("endid").value = countpage;
    }else{
        table += "<td width='20' align='center' valign='middle'><a href='javascript:previous();'><img src='images/Previous.gif' width='8' height='8' border='0'title='上10页'></a></td>";
        for(i=countpage - 9;i<=countpage;i++){
            table += "<td width='20' align='center' valign='middle'><a href='javascript:showpage(" + i + ");'>" + i + "</a></td>";
        }
        document.getElementById("endid").value = countpage;
    }
    table += "<td width='20' align='center' valign='middle'><a href='javascript:last();'><img src='images/Last.gif' width='9' height='8' border='0'title='尾页'></a></td>";
    table += "</tr></table>";
    document.getElementById("pageNews").innerHTML = table;
}

4.将<script language="JavaScript" type="text/javascript">first();</script>放在<div id="pageNews"></div>后，用于初始化分页列表并将结果显示于div中。

5.在news.asp中加入程序，在页面打开时查询数据库，并将总页数保存于countnews中。

至此，整个新闻列表显示页就完整了。最后说一句：凡事，首先从简单的出发...

上一篇: 怎么用javascript进行拖拽

下一篇: Flash破解与加密

文章来自: 本站原创

引用通告: 查看所有引用 | 我要引用此文章

Tags:

最新日志:

评论: 20 | 引用: 0 | 查看次数: 12494

mcgrady[2007-07-28 09:45 AM |

| 116.24.4.99 |

回复]

19^#

呵呵，加你QQ了！

dnawo[2007-07-27 05:14 PM |

| 59.56.77.179 |

回复]

18^#

都没显示错误信息吗？能不能通过Web访问我看下？
不行加我Q：270250392

mcgrady[2007-07-27 11:20 AM |

| 218.18.206.26 |

回复]

17^#

<div id="pageNews"></div><script language="JavaScript" type="text/javascript">first();</script>
<script language="javascript">JS代码</script>
我的代码是这样写的那里不对了

mcgrady[2007-07-27 11:08 AM |

| 218.18.206.26 |

回复]

16^#

mcgrady[2007-07-27 11:05 AM |

| 218.18.206.26 |

回复]

15^#

<%
Sql = "select * from news"
Set rs = Server.CreateObject("ADODB.RecordSet")
Rs.open sql,conn,1,1
Rs.pagesize = 3
countnews=rs.pagecount
%>

dnawo[2007-07-26 05:30 PM |

| 59.56.77.179 |

回复]

14^#

不好意思，我也是在公司网站上做了一遍可以
源码诉不能提供，不过你可以说说看你的错误信息

mcgrady[2007-07-26 04:41 PM |

| 218.17.237.100 |

回复]

13^#

晕啊，调试不出来，能否提供源码下载哟！！！！！！

NEXT[2007-01-29 05:25 PM |

| 218.19.97.178 |

回复]

12^#

晕~~~
搞来搞去还是没搞明白...

dnawo[2007-01-25 00:10 AM |

| 124.21.236.196 |

回复]

11^#

DIV必须在showpage(1)前

AAJZ[2007-01-24 06:21 PM |

| 222.171.73.128 |

回复]

10^#

哈哈~还是没调试明白~能告诉我正确的DIV和Script的代码放置顺序吗？～

发表评论

请登录后再发表评论！

Powered By PJBlog3 V3.2.9.518 CopyRight 2005 - 2021, 木子屋 xhtml | css
Processed in 0.789063 second(s) , 6 queries , Simple Yellow Design By ChangHua(FatMouse) 闽ICP备19016051号-1

01.w3school	02.51Windows
03.ES6入门教程	04.PHP中文手册
05.MSDN\|.NET	06.Visual Studio\|O
07.ASP.NET MVC2	08.ASP.NET MVC3
09.jQuery\|D\|P	10.Vue.js
11.AspNetPager	12.SharpZipLib
13.AjaxPro	14.Json.NET
15.Web Services	16.BaiDu API
17.数据堂	18.纯真IP库
19.SharpDevelop	20.动软
21..NET Reflector	22.百度\|高德[坐标]
23.Layui\|G\|X\|Q	24.Ele\|uni-app
25.SourceForge	26.CodeProject
27.Dynamic Drive	28.CodePlex
29.GitHub	30.Gitee
31.IItellYou	32.面包多
33.一门APP	34.友盟数据
35.JSON格式化	36.在线文本比较
37.微软开发者中心	38.Android开发者中心

Javascript+ASP打造无刷新新闻列表(续)

编辑:dnawo 日期:2007-01-19

Category

IM Online

User Panel

Search

Recent Comments

最新评论

Resources