CMS系统静态列表页的js分页

     最近在做一套生成静态网站的系统，一直困绕列表页维护问题。

如果数据量大，每次新增，删除，修改 如果都重新生成一遍列表页，对服务器IO读写压力太大，查了一些网上的方案，也没有十分完美的解决。

一般的CMS处理得都比较简单。比如说新浪很多频道的列表页都是按日期归档的，一天发表的文章生成一个列表页，而有些专题的子频道列表页直接就没有处理分页。凤凰网的列表页分页就只有上一页和下一页的链接，系统在处理的时候就更新两个列表页-当前最新的列表页和最后更新过的列表页，规则是当上次处理分页后更新的文章数大于等于三分之五Pagesize时进行分页操作。搜狐的列表页就要复杂一些，有列表页首页链接，有输入页码跳转等，在页尾的Javascript脚本中里面有一个变量maxPage，猜测应该是后期include包含进去的。

决定仿照搜狐列表页分页、凤凰网列表分页规则。

---

 以下JS分页引用自panweizeng.com

 

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><a href="'+this.currentFileName+'.html">首页</a></span>';

        //如果不是在第一个listSize，例如第一个十页，就显示上一页

        if(tens != 0) {

            html += '<span>'

                +'<a href="'+this.currentFileName+'_'+(this.currentNo+1)

                +'.html">上一页</a></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 += '<a href="'+this.currentFileName+'_'+_linkNo.toString()+'.html">';

            else if (!_isCurrent)

                html += '<a href="'+this.currentFileName+'.html">';

            html += _no.toString();

            html += '</a>';

            html += '</span>';

        }

       

        //如果没到最后一个listSize，显示下一页

        if(tens != Math.floor(this.totalNo / this.listSize)) {

            html += '<span><a href="'+this.currentFileName+'_'

                +(this.currentNo-1)+'.html">下一页</a></span>';

        }

        html += '<span><a href="'+this.currentFileName+'_1.html">末页</a></span>';

        $(this.holder).innerHTML = html;

    },

    init:function(){

        this.preRender();

        this.render();

    }

}

Paging.init();

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