Js分页条 摆脱JQuery及JQuery分页插件的束缚

前言：这个是很久很久自己写的一个 Js 分页条，今天无意中看 自己写的JS类库中 ，发现这个文件，看了下，感觉这个可能以后还用的到他。

所以，先保存起来再说，怕以后都找不到你了。简单的逻辑，简单的实现，不简单的应用。

想想自己很久很久以前，想写个分页，到处网上找第三方控件，还要总是百度，谷歌查怎么用，现在想想，真是天真。

后来，就想自己写个分页条，那时候是写ASPX页面，当时都不太了解ASP.NET运行原理等等的，当时还天真的用了VIEWSTATE来保存数据，

更天真的是，我既然写个不同的页码条数不会写，而是写死，膜拜别人网站各种分页条，天啊！现在想想想死的心都有。

我现在只能感慨一句，什么分页，都是浮云！

好了，回顾了这么久我青涩的过去，该是时候上代码了。

Pagination.Js:

/*
Author:Kuse Wu
Date:2011-09-04 16:00:00
Modified:2011-9-5 09:00:00
Tips:
说明文档：
创建pagination对象参数说明。(json格式)
totalCount:总记录数，必填。
leftInterval: 当前页码左边相隔页码数。 默认值为：2
rightInterval: 当前页码右边相隔页码数。 默认值为：3
className:样式类名。默认为:yahoo2  子类命名规则: current prev next disabled status
pageSize:单页记录数。默认为：10
callBack:回调函数。获得参数：index，当前页码。
CopyRight: Jusoc
*/

function pagination(data) {
    var inner = { leftInterval: 2, rightInterval: 3, totalCount: 0, pageSize: 10,className : "yahoo2" };
    var pagecount = null;
    var container = null;
    function initialize() {
        if (data) {
            if (data.totalCount) inner.totalCount = data.totalCount;
            if (data.callBack) inner.callBack = data.callBack;
            if (data.rightInterval) inner.rightInterval = data.rightInterval;
            if (data.leftInterval) inner.leftInterval = data.leftInterval;
            if (data.pageSize) inner.pageSize = data.pageSize;
            if (data.className) inner.className = data.className;
        }
        pagecount = Math.ceil(inner.totalCount / inner.pageSize);
        container = document.createElement("div");
        container.className = "yahoo2";
    }
    this.pager = function (index) {
        renderPager(index);
    }
    function renderPager(pagenumber) {
        removeAll(container);  //清楚容器内的所有元素

        //当没有记录时
        if (inner.totalCount <= 0) {

            container.appendChild(createElement("共 0 页", "span", null, "status"));
            document.body.appendChild(container);
            return;
        }

        //创建上一页
        container.appendChild(renderButton("prev", pagenumber, renderPager));
        var startIndex = Math.max(1, (pagenumber - inner.leftInterval));
        var endIndex = Math.min(pagecount, (pagenumber + inner.rightInterval));

        if (pagenumber < inner.leftInterval + 1) {
            endIndex = (inner.leftInterval + inner.rightInterval + 1) > pagecount ? pagecount : (inner.leftInterval + inner.rightInterval + 1)
        }
        if ((pagenumber + inner.rightInterval) > pagecount) {
            startIndex = (pagecount - inner.leftInterval - inner.rightInterval) < 1 ? 1 : (pagecount - inner.leftInterval - inner.rightInterval);
        }
        //for循环创建 数码
        for (var i = startIndex; i < endIndex + 1; i++) {
            if (pagenumber == i) {
                container.appendChild(createElement(i,"span",null,"current",i));
            }
            else {
                //创建元素
                container.appendChild(createElement(i,"a",renderPager,"",i));
            }
    }
    //创建 省略
    if ((inner.leftInterval + inner.rightInterval + 1) < pagecount && pagenumber != pagecount)
        container.appendChild(createElement("...", "span", null, "status"));

    //创建下一页
    container.appendChild(renderButton("next", pagenumber, renderPager));

    //创建总页数
    container.appendChild(createElement("共" + pagecount + "页", "span", null, "status"));
    //--------------------------创建文本
    var span = createElement("", "span", null, "status");
    var inputText = document.createElement("input");
    inputText.id = "txtPageIndex";
    inputText.type = "text";
    inputText.value = pagenumber;
    inputText.style.cssText = "20px; text-align:center;";
    span.appendChild(inputText);
    container.appendChild(span);

    //----------------------------创建按钮
    var span1 = createElement("", "span", null, "status");
    var inputBtn = document.createElement("input");
    inputBtn.type = "button";
    inputBtn.value = "确定";
    inputBtn.onclick = function () { goto(pagenumber, "txtPageIndex"); };
    span1.appendChild(inputBtn);
    container.appendChild(span1);

    //----- callback
    if (inner.callBack) inner.callBack(pagenumber);


    document.body.appendChild(container);
    }
    //按钮跳转方法
    function goto(index, id) {
        var val = parseInt(document.getElementById(id).value);
        if (val > pagecount) val = pagecount;
        if (val < 1) val = 1;
        renderPager(val);
    }
    //创建上一页下一页最后一页第一页
    function renderButton(buttonLable, pagenumber, buttonClickCallback) {
        var destPage = 1;
        var obj = null;
        switch (buttonLable) {
            case "first": //错了
                destPage = 1;
                if (pagenumber == 1)
                    obj = createElement(buttonLable, "span", null, "disabled", destPage);
                else
                    ob = createElement("第一页", "a", buttonClickCallback, "", destPage);
                break;
            case "prev":
                destPage = pagenumber - 1;
                
                if (pagenumber == 1) {
                    obj = createElement("上一页", "span", null, "disabled", destPage);
                }
                else {
                    obj = createElement("上一页", "a", buttonClickCallback, "prev", destPage);
                }
                break;
            case "next":
                destPage = pagenumber + 1;
                if (pagenumber==pagecount) {
                    obj = createElement("下一页", "span", null, "disabled", destPage);
                }
                else {
                    obj = createElement("下一页", "a", buttonClickCallback, "next", destPage);
                 }
                break;
            case "last": //错了
                destPage = pagecount;
                if (pagecount == pagenumber)
                    obj = createElement(buttonLable, "span", null, "disabled", destPage);
                else
                    obj = createElement("最后一页", "a", buttonClickCallback, "", destPage);
                break;
        }
        return obj;
    }
    //创建元素
    function createElement(text, type, fn, className,destPage) {
        var o = document.createElement(type);
        o.className = className;
        o.innerHTML = text;
        if (type == "a") {
            o.href="javascript:void(0)";
            if (fn)
                o.onclick = function () { fn(destPage); };
        }
        return o;
    }
    //删除所有节点
    function removeAll(obj) {
        if (obj.childNodes.length > 0)
            for (var i = obj.childNodes.length - 1; i > -1; i--) {
                obj.removeChild(obj.childNodes[i]);
            }
    }
    initialize();
}

HTML:

var p = new pagination({totalCount:1111,callBack:fn});

p.pager(1);

总结：我表示那时候确实还没更好的了解js的封装，感觉这么调用很别扭。

不过鉴于是之前的写的，还是自己一个人偷偷的笑！嗯，不错，还是写的不错的。
搞定~ho ho~