静态列表页的分页

相比于动态网站的列表页分页，静态列表页的分页是件麻烦的事情。因为旧的列表页发布出去以后就无法知道之后发布的总页数，而且也不可能每次更新列表页时去更新所有以前发布过的列表页（频道树节点多时，这个量非常大），所以一般的CMS处理得都比较简单。比如说新浪很多频道的列表页都是按日期归档的，一天发表的文章生成一个列表页，而有些专题的子频道列表页直接就没有处理分页。凤凰网的列表页分页就只有上一页和下一页的链接，系统在处理的时候就更新两个列表页-当前最新的列表页和最后更新过的列表页，规则是当上次处理分页后更新的文章数大于等于三分之五Pagesize时进行分页操作。搜狐的列表页就要复杂一些，有列表页首页链接，有输入页码跳转等，在页尾的Javascript脚本中里面有一个变量maxPage，猜测应该是后期include包含进去的。

在最近的一个项目中，对列表页的分页处理比上面说的几种要复杂一些。不看代码，先看效果。
这里的静态列表页是这样的，最早发布出去的第一页是列表页名字_1.html， 第二页是列表页名字_2.html，以此类推，到最后一页就是最新的一页是列表页名字.html或者列表页名字_列表页总页数.html。

下面是代码

  1. var Paging = {
  2.     holder:'paging',
  3.     currentNo:1,
  4.     currentFileName:'',//当前文件名，不包括后缀名和页码
  5.     listSize:10,//列表项链接的显示数目
  6.     totalNo:35,//列表页总页数
  7.     //初始化currentFileName和currentNo
  8.     preRender:function(){
  9.         var _lastIndex = location.href.lastIndexOf('/');
  10.         var _fileName = location.href.substr(_lastIndex+1);
  11.         var matchItem = _fileName.match(/(.*)_(\d+).html/i);
  12.         if(matchItem != null){
  13.             this.currentFileName = matchItem[1];
  14.             this.currentNo = parseInt(matchItem[2]);
  15.         } else {
  16.             this.currentFileName = _fileName.split('.')[0];
  17.             this.currentNo = this.totalNo;
  18.         }
  19.     },
  20.     render:function(){
  21.         //在页面上显示的页码
  22.         var realNo = this.totalNo - this.currentNo;
  23.         //页码对listSize的倍数
  24.         var tens = Math.floor(realNo / this.listSize);
  25.         //页码对listSize的余数
  26.         var units =  realNo % this.listSize;
  27.         var html = '';
  28.         html += '<span><a href="'+this.currentFileName+'.html">首页</a></span>';
  29.         //如果不是在第一个listSize，例如第一个十页，就显示上一页
  30.         if(tens != 0) {
  31.             html += '<span>'
  32.                 +'<a href="'+this.currentFileName+'_'+(this.currentNo+1)
  33.                 +'.html">上一页</a></span>';
  34.         }
  35.        
  36.         var _no=0,_linkNo=0,_isCurrent=false;
  37.         for(var i = 1 ; i < this.listSize+1 ; i++){
  38.             _no = tens*this.listSize+i;
  39.             //链接为倒序
  40.             _linkNo = this.totalNo - _no + 1;
  41.             _isCurrent = i == units+1 ? true : false;
  42.  
  43.             //到达最后一页就退出
  44.             if(_linkNo < 1) break;
  45.             //是否当前页
  46.             if(_isCurrent)
  47.                 html += '<span class="current">';
  48.             else
  49.                 html += '<span>';
  50.             //是否是列表页第一页
  51.             if(_no != 1 && !_isCurrent)
  52.                 html += '<a href="'+this.currentFileName+'_'+_linkNo.toString()+'.html">';
  53.             else if (!_isCurrent)
  54.                 html += '<a href="'+this.currentFileName+'.html">';
  55.             html += _no.toString();
  56.             html += '</a>';
  57.             html += '</span>';
  58.         }
  59.        
  60.         //如果没到最后一个listSize，显示下一页
  61.         if(tens != Math.floor(this.totalNo / this.listSize)) {
  62.             html += '<span><a href="'+this.currentFileName+'_'
  63.                 +(this.currentNo-1)+'.html">下一页</a></span>';
  64.         }
  65.         html += '<span><a href="'+this.currentFileName+'_1.html">末页</a></span>';
  66.         $(this.holder).innerHTML = html;
  67.     },
  68.     init:function(){
  69.         this.preRender();
  70.         this.render();
  71.     }
  72. }
  73. Paging.init();

其中代码中的Paging.totalNo是列表页的总数，这个是后期加入的。目前可以想到两种方法给脚本传递这个值，一个就是像搜狐一样在页面中include进去一个后期更新的文件，另外还有比较别扭的方法，就是最后更新的列表页传入一个值，形如doclist.html?535，后续打开的页面都会带着这个值，如果万一不是从第一页进入的比如从搜索引擎过来的话，在页面中会记录一个该列表当时发布的总页数作为补充。最后还是决定使用搜狐的方法，在更新最新的列表页时同时新发一个记录列表页总数的文件。另外为了SEO，可以专门做一个汇总归档页，当然也可以由CMS生成上一页和下一页的链接，这些方法都是容易做到的。

脚本浏览地址：http://panweizeng.com/others/itv_playlist_paging/paging.js

[ 分类: 学习 Learning ] 由 Pan 发表于 May 24, 2008 10:12 pm  固定链接 

《静态列表页的分页》 这篇文章一共有0 条评论   我也想说两句

还没有人对这篇文章发表评论，赶紧留一个吧。

RSS feed for comments on this post. TrackBack URI

相关文章：

发表评论