木子屋 Dnawo's BLOG

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

👤 dnawo 📅 2007-01-19 👁 14203 👍 0 💬 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中。

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

评论（19）

feilya 2007-01-20 13:38
请问有没有相应的源代码提供???
dnawo 2007-01-21 01:25
本文已更新，说得更详细些了
务必先看完"Javascript+ASP打造无刷新新闻列表"再看本文
AAJZ 2007-01-24 02:29
在news.asp中加入程序，在页面打开时查询数据库，并将总页数保存于countnews中。这个部分不是很理解~


请问可否给出详细的该页代码~?~
或者提供原文件下载~多谢!~
dnawo 2007-01-24 08:36
其原理就是在打开news.asp时，服务器端对数据库进行查询一次，将总记录数保存到countnews中，JS根据这总记录数控制分页数列。
AAJZ 2007-01-24 10:29
请恕愚笨~还是没有成功~countpage=rs.recordcount~已经读出~但还是无效~
盼望给出news.asp页的代码~多谢！~
AAJZ 2007-01-24 10:40
呵呵~已经搞定了~多谢~
可是~如何才能实现显示“当前第i页”的功能呢？~
dnawo 2007-01-24 11:25
要实现显示“当前第i页"就得回到"Javascript+ASP打造无刷新新闻列表"，在showpage函数中添加语句：
document.getElementById("nowpage").innerText = "当前第" + n + "页";
在页面恰当位置加标签：<div id="nowpage"></div>
^_^
AAJZ 2007-01-24 16:40
呵呵~可是只是这样子加入的话~页面初始化以后~因为是直接定义的showpage(1);~所以n还没有被赋值~
会不显示当前在第几页~而当点击了其他页数后~就没有问题了~这个该如何解决呢？~
dnawo 2007-01-24 17:21
初始化时调用showpage(1)函数，n就为1，那div中就有值了。如果没有值检查下div和showpage(1)的位置。
AAJZ 2007-01-24 18:21
哈哈~还是没调试明白~能告诉我正确的DIV和Script的代码放置顺序吗？～
dnawo 2007-01-25 00:10
DIV必须在showpage(1)前
NEXT 2007-01-29 17:25
晕~~~
搞来搞去还是没搞明白...
mcgrady 2007-07-26 16:41
晕啊 ，调试不出来，能否提供源码下载哟！！！！！！
dnawo 2007-07-26 17:30
不好意思，我也是在公司网站上做了一遍可以
源码诉不能提供，不过你可以说说看你的错误信息
mcgrady 2007-07-27 11:05
<%
Sql = "select * from news"
Set rs = Server.CreateObject("ADODB.RecordSet")
Rs.open sql,conn,1,1
Rs.pagesize = 3
countnews=rs.pagecount
%>
mcgrady 2007-07-27 11:08
<input name="endid" id="endid" type="hidden" value="0">
<input name="countnews" id="countpage" type="hidden" value="<%=countnews%>">
mcgrady 2007-07-27 11:20
<div id="pageNews"></div><script language="JavaScript" type="text/javascript">first();</script>
<script language="javascript">JS代码</script>
我的代码是这样写的 那里不对了
dnawo 2007-07-27 17:14
都没显示错误信息吗？能不能通过Web访问我看下？
不行加我Q：270250392
mcgrady 2007-07-28 09:45
呵呵，加你QQ了！
计算题
评论需审核通过后显示
← 上一篇 怎么用javascript进行拖拽 下一篇 → Flash破解与加密