Js分頁條 擺脫JQuery及JQuery分頁外掛程式的束縛

前言：這個是很久很久自己寫的一個 Js 分頁條，今天無意中看 自己寫的JS類庫中 ，發現這個檔案，看了下，感覺這個可能以後還用的到他。

所以，先儲存起來再說，怕以後都找不到你了。簡單的邏輯，簡單的實現，不簡單的應用。

想想自己很久很久以前，想寫個分頁，到處網上找第三方控制項，還要總是百度，Google查怎麼用，現在想想，真是天真。

後來，就想自己寫個分頁條，那時候是寫ASPX頁面，當時都不太瞭解ASP.NET運行原理等等的，當時還天真的用了VIEWSTATE來儲存資料，

更天真的是，我既然寫個不同的頁碼條數不會寫，而是寫死，膜拜別人網站各種分頁條，天啊！現在想想想死的心都有。

我現在只能感慨一句，什麼分頁，都是浮雲！

好了，回顧了這麼久我青澀的過去，該是時候上代碼了。

Pagination.Js:

View Code

/*
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 = "width: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~