js-分页实现

用JS实现静态网页的动态分页



设计思路及实现细节解释：

一. 显示各页的内容

已知有一个文章标题链接数组（title），它将分配在各页中显示出来，不同的页码显示不同的内容。为此，各页的序号是解决内容显示的关键所在。静态网页支持URL地址尾部参数，其结构为：

http://localhost/test/jspage.htm?1

其中，“?1”就是上述URL地址的尾部参数，在JS中，可用JS方法window.location.search取得：

idx=window.location.search; //得到“?x”字串

再用substr方法处理idx，得到问号后面的整数即为所需的页面序号：

    mylen=idx.length-1; //截取数
     idx=idx.substr(1,mylen); //得到序号

有了页面序号，各页显示的内容可以从标题链接数组title变量中提取。

二. 写页码链接

根据已知的总条目（total）和每页需要显示的条目数（show）可以计算出所需要的总页数（page）：

total%show==0 ? page=total/show : page=Math.ceil(total/show); //计算总页数

这里，运用了三元运算符，所以代码非常简洁。其意为：若总条目数（total）被每页显示条目数（show）整除，总页数等于总条目数除以每页显示数，否则用JS的ceil方法取得总页数。

然后可以编写一个打印链接页码函数再调用它即可。

【附一】JS分页脚本完整代码：

<script language="javascript">

var total=172; //总条目: 可变
var show=20; //每页显示条目数: 可变
total%show==0?page=total/show:page=Math.ceil(total/show); //计算总页数

//取得当前页序号 - idx
idx=window.location.search; //这里得到 ?0 字样
if(idx=="") idx="?0"; //初始可能没有URL的尾部参数
mylen=idx.length-1;
idx=idx.substr(1,mylen);

var title=new Array(); //测试用文章标题数组 title (赋值)
for(i=0;i<total;i++) {
     k=i+1;
     title[i]="文章标题 " + k + "<br>";
}

function echostr(pg) { //函数: 打印各页内容
     var mystr="";
     for(i=0;i<show;i++) {
         myidx=pg*show+i;
         if(title[myidx]) mystr+=title[myidx];  //只显示存在的内容
     }
     document.write(mystr);
}

//显示相关资料 - 测试用
document.write('总条目: ' + total + '┊每页显示数: ' + show + '┊需要页数: ' + page + '┊当前页码序号(idx): ' + idx + '<br><br>');

echostr(idx); //显示页面内容

function pg_link(all){ //函数: 打印页码链接
     linkstr="<br>第 ";
     for(i=0;i<all;i++) {
         j=i+1;
         i!=idx ? linkstr+="<a href='jspage.htm?" + i + "'>" + j + "</a> ":linkstr+=j + " ";
     }
     linkstr+="页";
     document.write(linkstr + "<br><br>");
}

pg_link(page); //显示页码链接

</script>


本文转自：http://www.cnblogs.com/sbxwylt/articles/1113166.html