JS+ASP实现无刷新新闻列表之分页

上次用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中.
 
至此，整个新闻列表显示页就完整了。最后说一句：凡事，首先从简单的出发...

相关阅读：

JS+ASP实现无刷新新闻列表方法