JS+ASP实现无刷新新闻列表之分页
作者:dnawo 来源:mzwu.com 发布时间:2007-08-22 12:57:00
标签:无刷新,ASP,JS,分页
上次用Javascript+ASP实现了无刷新的新闻列表,最后还有一个小问题没有解决:下边的分页数列"首页、上10页、下10页、尾页"间怎么切换?你应该不会想用传统的方法用ASP进行查询然后显示数列吧?那我们之前对无刷新所做的努力可就全白费了!
你首先应该想到的是再用Javascript+ASP实现无刷新显示数列,但这次我们也不用这个,我们有更简单的方法。
使用Javascript+ASP来显示分页数列的话那切换一次就得重新查询一次数据库,完全没有必要!我们只需在打开新闻列表页时查询一次数据库,将总页数保存起来(比如保存在一个隐藏的表单中),以后列表的切换工作就交给Javascript了,还是Javascript+ASP,不过本质不一样了哦,先前是同步,这次是异步了。
具体过程:
1.在页面中新建两个隐藏的表单域,其中一个用于存放当前列表的最后一项,另一个用于存放总页数:
<input name="endid" id="endid" type="hidden" value="0">
<input name="countnews" 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中.
至此,整个新闻列表显示页就完整了。最后说一句:凡事,首先从简单的出发...
相关阅读:
0
投稿
猜你喜欢
- 经常有网友会问,SQL Server占用了太多的内存,而且还会不断的增长;或者说已经设置了使用内存,可它没有用到那么多,这是怎么一回事儿呢?
- 别误会,IE是不支持CSS3高级选择器,包括最新的IE8(详见《CSS选择器的浏览器支持》),但是CSS选择器的确是很有用的,它可以大大的简
- 摘 要: 恢复丢失的数据库文件在很大程度上取决于所采用的备份策略。本文从恢复的灵活性出发,对Oracle8数据库的备份及恢复策略进行了探讨,
- 在服务器端asp程序可以接受html页面上的form传来的参数,那么它又如何实现IE地址参数判断呢?当地址栏没有参数"id"时
- LearningjQuery.com 博客帖子列表的左边有一个很酷的日期,如图:从图中我们看到,“2009”垂直排列在右侧。用Firebug
- 使用方法和步骤如下:step1检测是否已经启用ServiceBroker,检测方法:SelectDATABASEpRoPERTYEX(
- 在ASP编程中,身份认证可以说是常要用到的。但怎么样才能做到认证的安全呢?表单提交页面:sub.htm &
- If...Then...Else 语句的一种变形,即添加任意多个 ElseIf 子句以扩充 If...Then...Else 语句的功能,允
- 一个网站能切换不同的CSS风格大家应该都了解,像众所周知的腾讯在今年改版时也增加了切换皮肤的功能。根据时间自动调整站点风格是不错的想法,这种
- 两列布局的定宽自适应已经详解了,三列浮动中有两列定宽一列自适应的也详解了,那么该说说三列浮动中两列自适应一列定宽的布局了。中间定宽,左右两侧
- 总经一下前段时间用于的jQuery方法:find及children。需要的朋友可以参考下。首先看看英文解释吧: children方法:fin
- 近年来流行 Ajax,而 Ajax 的本质就是 XMLHttpRequest,是客户端 XMLHttpRequest 对象的使用。相对于 A
- 方法一、尽量使用复杂的SQL来代替简单的一堆 SQL.同样的事务,一个复杂的SQL完成的效率高于一堆简单SQL完成的效率。有多个查询时,要善
- 下面列出了asp远程网页数据采集程序中经常用到的函数,很实用,特别是正则表达式过滤函数。包括了使用xmlhttp采集远程网页内容,使用ado
- 由于Oracle自身比较复杂,在Linux环境下安装要涉及很多方面的因素。本文分两个方面介绍在Linux RedHat 6.0环境下Orac
- 无聊的人在无聊的时间做无聊的事打发自己,结果在无聊的事情中发现了IE对内联文字解释的一些疑惑。以下问题在FF2中没发现,而我也只
- FileUpload上传图片(图片不变形) 的实现方法,需要的朋友可以参考下。<style type="text/css&q
- 一般开发,SQL Server的数据库所有者为dbo.但是为了安全,有时候可能把它换成其它的名称,所有者变换不是很方便.这里列出两种供参考
- 解决安装Office2003 SP2后不能打开Access的问题手动更改注册表要解决此问题, 手动更改计算机上注册表位置启动 Access
- 日期和时间类型MySQL有多个表示各种日期和时间值的数据类型, 比如YEAR和DATE. MySQL存储时间的最精确粒度是秒。 然而, 能做