IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

    静态列表页的分页

    潘魏增发表于 2008-05-24 22:12:00
    love 0

    相比于动态网站的列表页分页,静态列表页的分页是件麻烦的事情。因为旧的列表页发布出去以后就无法知道之后发布的总页数,而且也不可能每次更新列表页时去更新所有以前发布过的列表页(频道树节点多时,这个量非常大),所以一般的CMS处理得都比较简单。

    比如说新浪很多频道的列表页都是按日期归档的,一天发表的文章生成一个列表页,而有些专题的子频道列表页直接就没有处理分页。

    凤凰网的列表页分页就只有上一页和下一页的链接,系统在处理的时候就更新两个列表页-当前最新的列表页和最后更新过的列表页,规则是当上次处理分页后更新的文章数大于等于三分之五Pagesize时进行分页操作。

    搜狐的列表页就要复杂一些,有列表页首页链接,有输入页码跳转等,在页尾的Javascript脚本中里面有一个变量maxPage,猜测应该是后期include包含进去的。

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

    下面是代码

    var Paging = {
        holder:'paging',
        currentNo:1,
        currentFileName:'',//当前文件名,不包括后缀名和页码
        listSize:10,//列表项链接的显示数目
        totalNo:35,//列表页总页数
        //初始化currentFileName和currentNo
        preRender:function(){
            var _lastIndex = location.href.lastIndexOf('/');
            var _fileName = location.href.substr(_lastIndex+1);
            var matchItem = _fileName.match(/(.*)_(d+).html/i);
            if(matchItem != null){
                this.currentFileName = matchItem[1];
                this.currentNo = parseInt(matchItem[2]);
            } else {
                this.currentFileName = _fileName.split('.')[0];
                this.currentNo = this.totalNo;
            }
        },
        render:function(){
            //在页面上显示的页码
            var realNo = this.totalNo - this.currentNo;
            //页码对listSize的倍数
            var tens = Math.floor(realNo / this.listSize);
            //页码对listSize的余数
            var units =  realNo % this.listSize;
            var html = '';
            html += '<span>[首页]()</span>';
            //如果不是在第一个listSize,例如第一个十页,就显示上一页
            if(tens != 0) {
                html += '<span>'+'[上一页]()</span>';
            }
    
            var _no=0,_linkNo=0,_isCurrent=false;
            for(var i = 1 ; i < this.listSize+1 ; i++){
                _no = tens*this.listSize+i;
                //链接为倒序
                _linkNo = this.totalNo - _no + 1;
                _isCurrent = i == units+1 ? true : false;
    
                //到达最后一页就退出
                if(_linkNo < 1) break;
                //是否当前页
                if(_isCurrent)
                    html += '<span class="current">';
                else 
                    html += '<span>';
                //是否是列表页第一页
                if(_no != 1 && !_isCurrent)
                    html += '[';
                else if (!_isCurrent)
                    html += '<a href="'+this.currentFileName+'.html">';
                html += _no.toString();
                html += ']()';
                html += '</span>';
            }
    
            //如果没到最后一个listSize,显示下一页
            if(tens != Math.floor(this.totalNo / this.listSize)) {
                html += '<span>[下一页]()</span>';
            }
            html += '<span>[末页]()</span>';
            $(this.holder).innerHTML = html;
        },
        init:function(){
            this.preRender();
            this.render();
        }
    }
    Paging.init();

    其中代码中的Paging.totalNo是列表页的总数,这个是后期加入的。

    目前可以想到两种方法给脚本传递这个值,一个就是像搜狐一样在页面中include进去一个后期更新的文件,另外还有比较别扭的方法,就是最后更新的列表页传入一个值,形如doclist.html?535,后续打开的页面都会带着这个值,如果万一不是从第一页进入的比如从搜索引擎过来的话,在页面中会记录一个该列表当时发布的总页数作为补充。最后还是决定使用搜狐的方法,在更新最新的列表页时同时新发一个记录列表页总数的文件。

    另外为了SEO,可以专门做一个汇总归档页,当然也可以由CMS生成上一页和下一页的链接,这些方法都是容易做到的。

    脚本浏览地址



沪ICP备19023445号-2号
友情链接