分页js封装【模拟淘宝分页】Ajax版本

效果图：

代码：

1、javascript

/**
* 分页js封装 Ajax beta 1.0
* 参数说明：
* MyJs.myPaging({
showBoxId : '显示分页容器id',   //显示分页容器id {String}
pageIndex : '当前页',           //当前页默认0 {String|int}
countPage : '总页数',           //总页数 {String|int}
type:'1'                        //显示类型1或0(默认) 【注：可选】{String|int}
* });
*   例如: 
*     1、 
*     var myPaging1=new $.myPaging({"showBoxId":"div1","pageIndex":"1","countPage":"10","type":"1"});
*     myPaging1.countPage = 50;
*     myPaging1.Print();
*     myPaging1.GoToPage = function (pageIndex){
*        //pageIndex当前页数
*        myPaging1.Print();
*    }
*     2、 
*    var __myPaging1 = new myPaging({ "showBoxId": "paging_box"}); //初始化
*    //__myPaging1.countPage = __countPage;__myPaging1.Print();//或
*    //__myPaging1.setCountPage(__countPage);  __myPaging1.Print();//或
*    __myPaging1.Print(__countPage);
*
*    __myPaging1.GoToPage = function (_pageIndex) {
*        __pageIndex = _pageIndex;
*
*        // 自定义方法
*        //GetData();
*    }      
*/
myPaging = function (config) {
    this._config = ["showBoxId", "pageIndex", "countPage", "type"];
    this.showBoxId = "";    // 显示分页容器id      
    this.pageIndex = "1";   // 当前页      
    this.countPage = "1";   // 总页数      
    this.type = "0";        // 显示类型1或0    
    this.obj = null;
    var c = this._config;
    if (config == null) { config = {}; }
    for (var i = 0; i < c.length; i++) {
        if (config[c[i]] && typeof (config[c[i]]) != 'undefined') {
            this[c[i]] = config[c[i]];
        }
    }
    //设置总页数
    this.setCountPage = function (_countPage){
        if (_countPage != null) { this.countPage = _countPage; }
    };
    //绘制
    this.Print = function (_countPage){
        if (_countPage != null) { this.countPage = _countPage; }
        this.obj = document.getElementById(this.showBoxId);
        if (this.countPage <= 1) { this.obj.innerHTML = ""; return; }
        var tmpPrePageIndex = Number(this.pageIndex) - 1;
        var tmpNextPageIndex = Number(this.pageIndex) + 1;
        var btnCount = 10;
        this.obj.innerHTML = "";
        if (this.pageIndex == 1) {
            var _span1 = document.createElement("span");
            _span1.setAttribute("class", "disabled");
            _span1.innerHTML = "<";
            this.obj.appendChild(_span1);
        } else {
            var _a1 = document.createElement("a");
            _a1.innerHTML = "<";
            _a1.href = "###";
            _a1.onclick = this._goTo("click", tmpPrePageIndex);
            this.obj.appendChild(_a1);
        }
        if (this.countPage <= btnCount) {//当总页数少于分页按钮数目时
            for (var i = 0; i < this.countPage; ++i) {
                var tmpIndex = i + 1;
                if (tmpIndex == this.pageIndex) {
                    var _span1 = document.createElement("span");
                    _span1.setAttribute("class", "current");
                    _span1.innerHTML = tmpIndex;
                    this.obj.appendChild(_span1);
                } else {
                    var _a1 = document.createElement("a");
                    _a1.innerHTML = tmpIndex;
                    _a1.href = "###";
                    _a1.onclick = this._goTo("click", tmpIndex);
                    this.obj.appendChild(_a1);
                }
            }
        } else {
            if (this.pageIndex < 7) {//当前页少于7时
                for (var i = 0; i < btnCount; ++i) {
                    var tmpIndex = i + 1;
                    if (tmpIndex == this.pageIndex) {
                        var _span1 = document.createElement("span");
                        _span1.setAttribute("class", "current");
                        _span1.innerHTML = tmpIndex;
                        this.obj.appendChild(_span1);
                    } else {
                        var _a1 = document.createElement("a");
                        _a1.innerHTML = tmpIndex;
                        _a1.href = "###";
                        _a1.onclick = this._goTo("click", tmpIndex);
                        this.obj.appendChild(_a1);
                    }
                }
                var _span1 = document.createElement("span");
                _span1.innerHTML = "...";
                this.obj.appendChild(_span1);
            } else {//当前页大于等于7时
                if (this.pageIndex >= (this.countPage - 5)) {
                    var _a1 = document.createElement("a");
                    _a1.innerHTML = "1";
                    _a1.href = "###";
                    _a1.onclick = this._goTo("click", 1);
                    this.obj.appendChild(_a1);
                    var _a2 = document.createElement("a");
                    _a2.innerHTML = "2";
                    _a2.href = "###";
                    _a2.onclick = this._goTo("click", 2);
                    this.obj.appendChild(_a2);
                    var _span3 = document.createElement("span");
                    _span3.innerHTML = "...";
                    this.obj.appendChild(_span3);
                    for (var i = 0; i < 8; ++i) {
                        var tmpIndex = this.countPage - 7 + i;
                        if (tmpIndex == this.pageIndex) {
                            var _span1 = document.createElement("span");
                            _span1.setAttribute("class", "current");
                            _span1.innerHTML = tmpIndex;
                            this.obj.appendChild(_span1);
                        } else {
                            var _a1 = document.createElement("a");
                            _a1.innerHTML = tmpIndex;
                            _a1.href = "###";
                            _a1.onclick = this._goTo("click", tmpIndex);
                            this.obj.appendChild(_a1);
                        }
                    }
                } else {
                    var _a1 = document.createElement("a");
                    _a1.innerHTML = "1";
                    _a1.href = "###";
                    _a1.onclick = this._goTo("click", 1);
                    this.obj.appendChild(_a1);
                    var _a2 = document.createElement("a");
                    _a2.innerHTML = "2";
                    _a2.href = "###";
                    _a2.onclick = this._goTo("click", 2);
                    this.obj.appendChild(_a2);
                    var _span4 = document.createElement("span");
                    _span4.innerHTML = "...";
                    this.obj.appendChild(_span4);
                    for (var i = 0; i < 7; ++i) {
                        var tmpIndex = this.pageIndex - 2 + i;
                        if (tmpIndex == this.pageIndex) {
                            var _span1 = document.createElement("span");
                            _span1.setAttribute("class", "current");
                            _span1.innerHTML = tmpIndex;
                            this.obj.appendChild(_span1);
                        } else {
                            var _a1 = document.createElement("a");
                            _a1.innerHTML = tmpIndex;
                            _a1.href = "###";
                            _a1.onclick = this._goTo("click", tmpIndex);
                            this.obj.appendChild(_a1);
                        }
                    }
                    var _span5 = document.createElement("span");
                    _span5.innerHTML = "...";
                    this.obj.appendChild(_span5);
                }
            }
        }
        var _span90 = document.createElement("span");
        if (this.pageIndex == this.countPage) {
            _span90.setAttribute("class", "disabled");
            _span90.innerHTML = ">";
        } else {
            var _a1 = document.createElement("a");
            _a1.innerHTML = ">";
            _a1.href = "###";
            _a1.onclick = this._goTo("click", tmpNextPageIndex);
            _span90.appendChild(_a1);
        }
        this.obj.appendChild(_span90);
        var _span91 = document.createElement("span");
        _span91.innerHTML = "共：" + this.countPage + " 页";
        this.obj.appendChild(_span91);
        if (parseInt(this.type) == 1) {//绘制跳转
            var _input = document.createElement("input");
            _input.setAttribute("type", "text");
            _input.setAttribute("style", "width:20px;");
            _input.setAttribute("id", "txt_pageIndex_" + this.showBoxId);
            this.obj.appendChild(_input);
            var _a = document.createElement("a");
            _a.innerHTML = "确认";
            _a.href = "###";
            _a.onclick = this._goTo("index");
            this.obj.appendChild(_a);
        }
    };
    this._goTo = function (_type, _index) {
        var obj = this;
        if (_type == "index") {//跳转页面
            return function () {
                obj.GoToPageIndex.apply(obj);
            }
        }
        if (_type == "click") {//点击页面
            var arr1 = [_index];
            return function () {
                obj.GoToClick.call(obj, arr1);
            }
        }
    };
    this.GoToClick = function (_arr) {
        this.pageIndex = _arr[0];
        if (parseInt(this.pageIndex) > 0 && parseInt(this.pageIndex) <= parseInt(this.countPage)) {
            this.GoToPage(this.pageIndex);
        }
    };
    this.GoToPageIndex = function () {
        var _tmpObj = document.getElementById("txt_pageIndex_" + this.showBoxId);
        var pageIndex = _tmpObj.value;
        var re = /^[0-9]+.?[0-9]*$/;
        if (!re.test(pageIndex)) {
            alert("请输入整数");
            _tmpObj.value = "";
            return;
        }
        if (parseInt(pageIndex) > 0 && pageIndex <= parseInt(this.countPage)) {
            this.pageIndex = pageIndex;
            this.GoToPage(this.pageIndex);
        }
    };
}

2、css

 
 

  
  
DIV.digg
    {
	    padding:3px;
	    margin: 3px;
	    text-align: right;
	    font-size:12px;
	    font-family:Arial, Helvetica, sans-serif, "宋体";
    }
    DIV.digg A
    {
	    border-right: #ccc 1px solid;
	    padding-right: 4px;
	    border-top: #ccc 1px solid;
	    padding-left: 5px;
	    padding-bottom: 2px;
	    margin: 2px;
	    border-left: #ccc 1px solid;
	    color: #3367CC;
	    padding-top: 2px;
	    border-bottom: #ccc 1px solid;
	    text-decoration: none;
    }
    DIV.digg A:hover
    {
	    color: #F60;
    }
    DIV.digg A:active
    {
	    border-right: #6e4a6e 1px solid;
	    border-top: #6e4a6e 1px solid;
	    border-left: #6e4a6e 1px solid;
	    color: #000;
	    border-bottom: #6e4a6e 1px solid;
    }
    DIV.digg SPAN.current
    {
	    padding-right: 5px;
	    padding-left: 5px;
	    font-weight: bold;
	    padding-bottom: 2px;
	    margin: 2px;
	    color: #fff;
	    padding-top: 2px;
	    color: #F60;
    }
    DIV.digg SPAN.disabled
    {
	    border-right: #ccc 1px solid;
	    padding-right: 5px;
	    border-top: #ccc 1px solid;
	    padding-left: 5px;
	    padding-bottom: 2px;
	    margin: 2px;
	    border-left: #ccc 1px solid;
	    color: #ccc;
	    padding-top: 2px;
	    border-bottom: #ccc 1px solid;
    }
 
 
使用：
1、添加容器

 
 

  
  <div id="div_pageing" class="digg"></div>
  
  


 
 
2、初始化

var myPaging1 = new myPaging({ "showBoxId":"div2", "countPage": "10"});  

myPaging1.Print();//画图

    



3、点击翻页事件
//翻页事件    
//当点击翻页时，执行该事件。pageIndex为点击的当前页

   myPaging1.GoToPage = function (pageIndex){

        //pageIndex当前页数

        myPaging1.Print();

    }




问题：
1、该方法不能使用在会刷新页面