常用的Javascript分页方法

这个脚本是同事用来做前端网站时，列表分页用的，我略作了一下整理：

 

function Page() { }
//pageIndex 页面index

//pageSize  每页显示的条数

//totalCount 记录总数

//pageContainer 确切的应是pageBar 的container ；

 

Page.prototype.initPage = function(pageIndex, pageSize, _totalCount, pageContainer) {

    this.pageContainer = pageContainer;
    this.pageIndex = pageIndex == "" ? 1 : pageIndex; //取前面的pageIndex
    var pagepindex, totalpindex, template;
    var queryString = __GetQueryString__(window.location.href);
    var regQString = new RegExp("pindex=\\d+$", "g");
    var newQString = "";

    regQString.test(queryString) == false ? newQString = String.format("{0}&pindex=[pindex]", queryString) : newQString = queryString.replace(regQString, "pindex=[pindex]"); ;

    var templage = String.format('<a href="?{0}">[Number]</a>', newQString);
    pagepindex = _totalCount % pageSize == 0 ? _totalCount / pageSize : Math.floor(_totalCount / pageSize) + 1;

    totalpindex = _totalCount;

    var checkTemp = '<span class="current">[page]</span>';
    var pageHtml = templage.replace("[pindex]", 1)//返回首页
                           .replace("[Number]", "共" + totalpindex + "条信息");

    if (this.pageIndex > 1) {

        pageHtml += templage.replace("[pindex]", this.pageIndex - 1)
                            .replace("[Number]", "上一页");
    }

    if (pagepindex <= 10) {//总页数小于10页时
        for (var i = 1; i <= pagepindex; i++) {

            pageHtml += (i == this.pageIndex) ? checkTemp.replace("[page]", i) : templage.replace("[pindex]", i).replace("[Number]", i);
        }
    }

    else {//如果当前 页小于6时 不影响效果
        if (this.pageIndex <= 6) {
            for (var i = 1; i <= 10; i++) {
                pageHtml += (i == this.pageIndex) ? checkTemp.replace("[page]", i) : templage.replace("[pindex]", i).replace("[Number]", i);
            }
        }
        else {//如果当前页+4页没超过最大页数时
            if (this.pageIndex + 4 <= pagepindex) {
                for (var i = this.pageIndex - 5; i <= this.pageIndex + 4; i++) {

                    pageHtml += (i == this.pageIndex) ? checkTemp.replace("[page]", i) : templage.replace("[pindex]", i).replace("[Number]", i);
                }
            }
            else {//如果当前页+4页超过最大页数，则从后往前取页数
                for (var i = pagepindex - 10; i <= pagepindex; i++) {

                    pageHtml += (i == this.pageIndex) ? checkTemp.replace("[page]", i) : templage.replace("[pindex]", i).replace("[Number]", i);
                }

            }
        }
    }

    if (this.pageIndex != pagepindex) {
        pageHtml += templage.replace("[pindex]", this.pageIndex + 1)
                            .replace("[Number]", "下一页");
    }
    this.pageContainer.innerHTML = pageHtml;
}

 

如我们需要在页面的:

 <div id="pageBar" class="pages">
 </div>

里展示我们的分页工具栏，应这样调用：

<script type="text/javascript">
        window.addEvent("domready", function() { //我这里用的是MOOTOOLS的脚本框架，如不用的话，去掉！
            var page = new Page();
            var pindex = __ParseQueryString__(__GetQueryString__(window.location.href), "pindex");
            page.initPage(pindex, 5, totalCount, $('pageBar'));
        });
    </script>

 下面补充下，这个类里用到的一个函数,javascrip 取QueryString：

 function __GetQueryString__(url) {
        var pos = url.indexOf('?');
        if( pos > 0)
            return url.substring(pos+1);
        else
            return "";
    }
效果如下：