javascrpt分页，急 急 急！

是这样的，我想用js实现点击下一页、上一页以及数字1、2、3、4的时候，来刷新一下数据(刷新后的显示数据随便文字、图片都可以的)，一行4张图片，每一页的数据是16张图片！我有如下代码请大侠们帮我看看，怎么样来实现每一页的数据刷新！最好能给我再添加一个首页和尾页的功能！非常感谢，感激不尽！我的QQ邮箱：[email protected]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="gb2312" >
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" /> <title>js分页效果</title>
<style type="text/css" title="currentStyle" media="screen">
/* Paginator */
.paginator {
font: 14.8px normal Arial, Helvetica, sans-serif;
color: #666666;
margin-top: 10px;
margin-bottom: 5px;
line-height: 150%;
background-color: #EEFFEE;
text-align: center;
}
.paginator a, .thispage, .break {
padding: 2px 4px;
}
.paginator .prev {
margin-right: 20px;
}
.paginator .next {
margin-left: 20px;
}
.paginator .count {
margin-left: 20px;
font-size: 11px;
}
</style>
</head>
<body>
<div id="pagebar" class="paginator"></div>
<script language="javascript" type="text/javascript">
function QueryString(item){
var sValue=location.search.match(new RegExp("[\?\&]"+item+"=([^\&]*)(\&?)","i"))
return sValue?sValue[1]:sValue
}
var count = 300;
var perpage = 20;
var currentpage = QueryString("page");
if (currentpage==null){
currentpage = 1;
}else{
currentpage = parseInt(currentpage);
}
var pagecount = Math.floor(count/perpage);
var pagestr = "";
var breakpage = 9;
var currentposition = 4;
var breakspace = 2;
var maxspace = 4;
var prevnum = currentpage-currentposition;
var nextnum = currentpage+currentposition;
if(prevnum<1) prevnum = 1;
if(nextnum>pagecount) nextnum = pagecount;pagestr += (currentpage==1)?'<span class="prev">< 前页</span>':'<span class="prev"> <a href="?page='+(currentpage-1)+'">上一页</a></span>';if(prevnum-breakspace>maxspace){
for(i=1;i<=breakspace;i++)
pagestr += '<a href="?page='+i+'">'+i+'</a>';
pagestr += '<span class="break">...</span>';
for(i=pagecount-breakpage+1;i<prevnum;i++)
pagestr += '<a href="?page='+i+'">'+i+'</a>';
}else{
for(i=1;i<prevnum;i++)
pagestr += '<a href="?page='+i+'">'+i+'</a>';
}
for(i=prevnum;i<=nextnum;i++){
pagestr += (currentpage==i)?'<span class="thispage">'+i+'</span>':'<a href="?page='+i+'">'+i+'</a>';
}
if(pagecount-breakspace-nextnum+1>maxspace){
for(i=nextnum+1;i<=breakpage;i++)
pagestr += '<a href="?page='+i+'">'+i+'</a>';
pagestr += '<span class="break">...</span>';
for(i=pagecount-breakspace+1;i<=pagecount;i++)
pagestr += '<a href="?page='+i+'">'+i+'</a>';
}else{
for(i=nextnum+1;i<=pagecount;i++)
pagestr += '<a href="?page='+i+'">'+i+'</a>';
}pagestr += (currentpage==pagecount)?'<span class="next">后页 ></span>':'<span class="next"><a href="?page='+(currentpage+1)+'">下一页</a></span>';
document.getElementById("pagebar").innerHTML = pagestr;
</script>
</body>
</html>

解决方案 »

  1.   

    分页的话，用后端语言（比如PHP）会很好实现，不知道JS要怎么做。
      

  2.   

    现成的分页插件一大把，你搜“jQuery分页插件”即可。从原理上来说，就是用Ajax取得页面总数，计算分页数据写入分页区，点击页码时通过Ajax读取数据刷新指定区域，如此这般。
      

  3.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="gb2312" >
    <head>
    <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <title>js分页效果</title>
    <style type="text/css" title="currentStyle" media="screen">
    /* Paginator */
    .paginator {
    font: 14.8px normal Arial, Helvetica, sans-serif;
    color: #666666;
    margin-top: 10px;
    margin-bottom: 5px;
    line-height: 150%;
    background-color: #EEFFEE;
    text-align: center;
    }
    .paginator a, .thispage, .break {
    padding: 2px 4px;
    }
    .paginator .prev {
    margin-right: 20px;
    }
    .paginator .next {
    margin-left: 20px;
    }
    .paginator .count {
    margin-left: 20px;
    font-size: 11px;
    }
    #div_Info{
    width:500px;
    height:300px;
    margin:20px auto;
    font-size:12px;
    padding:5px;
    line-height:20px;
    border:#CCCCCC solid 1px;
    overflow:hidden;
    word-spacing:normal;}
    </style>
    </head>
    <body>
    <div id="div_Info">
    是这样的，我想用js实现点击下一页、<br />上一页以及数字1、2、3、4的时<br />候，来刷<br />新一下数据(刷<br />新后<br />的显示数据随便文字、图<br />片都可以的,<br />只要能实<br />现就行)，我有如下代码<br />请帮我<br />看看，怎么样来实现<br />每一<br />页的数据<br />刷新！非常<br />感谢，鄙人<br />感激不尽！我的<br />QQ邮箱：2285289<br />[email protected]<br />om， 或者<br />一起分<br />享给大家！ 
    </div>
    <div id="pagebar" class="paginator"></div>
    <script language="javascript" type="text/javascript">
    function QueryString(item){
    var sValue=location.search.match(new RegExp("[\?\&]"+item+"=([^\&]*)(\&?)","i"))
    return sValue?sValue[1]:sValue
    }
    var count = 560;
    var perpage = 20;
    var currentpage = QueryString("page");
    if (currentpage==null){
    currentpage = 1;
    }else{
    currentpage = parseInt(currentpage);
    }
    document.getElementById("div_Info").innerHTML = currentpage;
    var pagecount = Math.floor(count/perpage);
    var pagestr = "";
    var breakpage = 9;
    var currentposition = 4;
    var breakspace = 2;
    var maxspace = 4;
    var prevnum = currentpage-currentposition;
    var nextnum = currentpage+currentposition;
    if(prevnum<1) prevnum = 1;
    if(nextnum>pagecount) nextnum = pagecount;pagestr += (currentpage==1)?'<span class="prev">上一页</span>':'<span class="prev"> <a href="?page='+(currentpage-1)+'">上一页</a></span>';if(prevnum-breakspace>maxspace){
    for(i=1;i<=breakspace;i++)
    pagestr += '<a href="?page='+i+'">'+i+'</a>';
    pagestr += '<span class="break">...</span>';
    for(i=pagecount-breakpage+1;i<prevnum;i++)
    pagestr += '<a href="?page='+i+'">'+i+'</a>';
    }else{
    for(i=1;i<prevnum;i++)
    pagestr += '<a href="?page='+i+'">'+i+'</a>';
    }
    for(i=prevnum;i<=nextnum;i++){
    pagestr += (currentpage==i)?'<span class="thispage">'+i+'</span>':'<a href="?page='+i+'">'+i+'</a>';
    }
    if(pagecount-breakspace-nextnum+1>maxspace){
    for(i=nextnum+1;i<=breakpage;i++)
    pagestr += '<a href="?page='+i+'">'+i+'</a>';
    pagestr += '<span class="break">...</span>';
    for(i=pagecount-breakspace+1;i<=pagecount;i++)
    pagestr += '<a href="?page='+i+'">'+i+'</a>';
    }else{
    for(i=nextnum+1;i<=pagecount;i++)
    pagestr += '<a href="?page='+i+'">'+i+'</a>';
    }pagestr += (currentpage==pagecount)?'<span class="next">下一页</span>':'<span class="next"><a href="?page='+(currentpage+1)+'">下一页</a></span>';
    document.getElementById("pagebar").innerHTML = pagestr;</script>
    </body>
    </html>
    我想点击上一页或者1、2、3的时候显示的是不同文本的内容，而不是显示的是数字，应该怎么改代码呢！求帮助啊