JavaScript 分页控件的实现

网上看到很多的分页，都做的很棒，想自己来实现一个，学习JS是从2012年开始的，一直在摸索着，今天有幸对call和applay方法的顿悟！顿时一片开朗！我才明白这两个方法多么的强大！奉上菜鸟的分页实现代码吧：

---

html部分很简单：

一个DIV包着一张表格，然后就是分页的html代码，这个可以封装到JS里面的：

 <table id="pageTable">
        <tr>
           /*****这里可写可不写，JS会替换这里的代码*****/
        </tr>
 </table>
<!-- 分页的html -->
<div class="bm bw0 pgs cl mtm">
        <span id="fd_page_bottom">
        <div class="pg">
            <a class="prev" id="prev" href="javascript:;">上一页</a>
            <div id="pageWrap"></div>
            <label>
                <input type="text" title="输入页码，按回车快速跳转" size="2" class="px" name="custompage">
                <span id="pageThat"></span>
            </label>
            <a href="javascript:;" id="pageAllText"></a>
            <a class="nxt" id="next" href="javascript:;">下一页</a>
        </div>
        </span>
 </div> 

JS部分：

/*
 * 需求分析
 * 要显示一共有多少页的功能
 * 每页显示的有多少条数据
 * 加载到内存中，然后去读
 * 按需加载
 * */

//一共有多少页// 每页显示多少条数据 //一共有多少条数据
var pageNum = 0, dataNum = 5, dataAll = 0;

var dataOjb = document.getElementById("pageTable");

dataAll = dataOjb.tBodies[0].rows.length;

/*
 * 显示页面分页数：
 * 根据可分的页面数，加载多少个分页标签
 * 每一个标签携带一个多少页的数据
 * 如果是分页大于10，那么10后面的分页标签显示省略号一个标签来代替
 * 显示最后一个*分页符号
 */
//显示页数和条数的方法
function showPageTiao(dataObj) {

    dataAll = dataObj.length;

    var pageShow = document.getElementById("pageAllText"),
        pageShowText = "共 " + dataAll + " 条数据";

    pageShow.setAttribute("title", pageShowText);
    pageShow.innerHTML = pageShowText;
}

/*
 每一个分页标签接受点击事件
 传递分页参数，调用分页的核心方法
 改变分页标签的样式
 以上是分页标签触发事件时要做的
 */

//分页外围的DIV
var pageWrap = document.getElementById("pageWrap");

/*这里是一批测试的数据*/
var newData = [
   '<tr><td>1</td><td>的算法的发送到</td><td>1212</td><td>sdfsf</td><td>2012、1、2</td></tr>',
   '<tr><td>22</td><td>的算法的发送到</td><td>1212</td><td>sdfsf</td><td>2012、1、2</td></tr>'
]


//创建新的分页数据
function createPageData(trDataObj, dataPage, t) {

    //显示的数据源  //分页数 // 显示多少条
    //分页数其实就是从数据源的什么地方开始读 56 

    for (var i = 0; i < t; i++) {
        var newTr = dataOjb.tBodies[0];
        var createTr = document.createElement("tr");
        //插入数据
        createTr.innerHTML = trDataObj[ (dataPage - 1) * t + i].innerHTML ||
                trDataObj[ (dataPage - 1) * t + i] || "没有数据... ";

        newTr.appendChild(createTr);
    }
}


//显示分页数
function pagingShow(dataSource) {

    var p = parseInt(dataSource.length / dataNum);

    //分页标签
    for (var k = 1; k <= p; k++) {

        var pageTag = document.createElement("a");
        pageTag.setAttribute("href", 'javascript:;');
        pageTag.setAttribute("page", k);
        pageTag.innerHTML = k;

        //10页以上的分页
        if (k > 10) {
            pageTag.style.display = "none";
            //10以下的分页
            if (k == p) {
                pageTag.setAttribute("class", "last");
                pageTag.style.display = "block";
                pageTag.innerHTML = "... " + k;
            }
        } 
        pageWrap.appendChild(pageTag);
    }
}


//绑定事件的闭包
function pageClik() {

    for (var i = 0; i < pageWrap.childNodes.length; i++) {
        (function () {
            var that = i; //火狐
                pageWrap.childNodes[that].addEventListener("click", function (event) {
                    //获取分页数
                    var pageNumber = parseInt(this.getAttribute("page"));
                    //调用分页方法 //传递分页参数

                    paging(newData, pageNumber, 5);
                    pageThat(pageNumber);

                    this.setAttribute("id", "active");117 
                    showPageTiao(newData);

                    return false;
                }, false);

        })();
    }
}


//分页操作的关键方法  //接受一个参数//这个参数决定显示第几个分页
function paging(dataObj, num, pageNum) {

    var dataOjbs = document.getElementById("pageTable");

    //删除旧的数据
    for (var i = 0, j = dataOjbs.rows.length; j >= i; j--) {
        dataOjbs.deleteRow(j - 1);
    }

    for (var i = 0; i < pageWrap.childNodes.length; i++) {
        pageWrap.childNodes[i].removeAttribute("id");
    }

    //激活分页选项
    pageWrap.childNodes[num - 1].setAttribute("id", "active");

    //插入新数据  // 传递三个参数：数据对象，显示数，分页数
    createPageData(dataObj, num, pageNum);

}

//显示当前是多少页
function pageThat(num) {

    var pageThat = document.getElementById("pageThat");
    pageThat.innerHTML = "当前第 " + num + " 页";

}


var prevs = document.getElementById("prev");
var nexts = document.getElementById("next");

prevs.addEventListener("click", function () {
        prevPage();
}, false);

nexts.addEventListener("click", function () {
        nextPage();
}, false);


//上一页的操作方法
//获取激活项的索引//在原有的页上自加1
function prevPage() {

    showPageTiao(newData);

    var prev = document.getElementById("active");

    if (!prev.previousSibling) {
        return;
    } else {

        var prevActive = parseInt(prev.previousSibling.getAttribute("page"));

        prev.removeAttribute("id");
        prev.previousSibling.setAttribute("id", "active");

        paging(newData, prevActive, 5);
        pageThat(prevActive);

    }


}

//下一页的操方法
//获取激活项的索引//在原有的页上自减1
function nextPage() {

    showPageTiao(newData);

    var next = document.getElementById("active");

    if (!next.nextSibling) {
        return;
    } else {
        var nextActive = parseInt(next.nextSibling.getAttribute("page"));

        next.removeAttribute("id");
        next.nextSibling.setAttribute("id", "active");

        paging(newData, nextActive, 5);
        pageThat(nextActive);
    }
}


//========================初始化======================//
//存储要显示的行数据
var oldData = [];

for (var i = 0; i < dataAll; i++) {
    oldData.push(dataOjb.tBodies[0].rows[i]);
}

//删除旧的数据
for (var i = 0, j = dataOjb.rows.length; j >= i; j--) {
    dataOjb.deleteRow(j - 1);
}

//重新设置条数
//分页数
pagingShow(newData);

pageClik();

pageThat(1);

//总条数
showPageTiao(oldData);

paging(oldData, 1, 5);
//====================================================//

效果：