大家在展示數(shù)據(jù)的時候難免會用到表格，而分頁的存在會使表格看起來更簡潔。

<table class="table table-hover">
        <thead>
        <tr>
            <th>日期</th>
            <th>小時</th>
            <th>溫度</th>
        </tr>
    </table>
    <table class="table table-hover table-striped" id="table_result">
        <tbody id="table_body_result">
        <tr>
            <td>2017-01-10</td>
            <td>20</td>
            <td>20</td>
        </tr>
        <tr>
            <td>2017-01-10</td>
            <td>20</td>
            <td>20</td>
        </tr>
        <tr>
            <td>2017-01-10</td>
            <td>20</td>
            <td>20</td>
        </tr>
       <!--中間省略多行數(shù)據(jù)-->
        </tbody>
    </table>
    <div id="barcon" name="barcon"></div>//空的div用來放分頁后的表格

下面是js分頁的代碼

    goPage(1,15);
    function goPage(pno, psize) {
        var itable = document.getElementById("table_result");//通過ID找到表格
        var num = itable.rows.length;//表格所有行數(shù)(所有記錄數(shù))
        var totalPage = 0;//總頁數(shù)
        var pageSize = psize;//每頁顯示行數(shù)
        //總共分幾頁
        if (num / pageSize > parseInt(num / pageSize)) {
            totalPage = parseInt(num / pageSize) + 1;
        } else {
            totalPage = parseInt(num / pageSize);
        }
        var currentPage = pno;//當(dāng)前頁數(shù)
        var startRow = (currentPage - 1) * pageSize + 1;//開始顯示的行  1
        var endRow = currentPage * pageSize;//結(jié)束顯示的行   15
        endRow = (endRow > num) ? num : endRow;
        //遍歷顯示數(shù)據(jù)實(shí)現(xiàn)分頁
        for (var i = 1; i < (num + 1); i++) {
            var irow = itable.rows[i - 1];
            if (i >= startRow && i <= endRow) {
                irow.style.display = "block";
            } else {
                irow.style.display = "none";
            }
        }
        var tempStr = "";
        if (currentPage > 1) {
            tempStr += "<a href=\"#\" onClick=\"goPage(" + (currentPage - 1) + "," + psize + ")\"><上一頁&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>"
            for (var j = 1; j <= totalPage; j++) {
                tempStr += "<a href=\"#\" onClick=\"goPage(" + j + "," + psize + ")\">" + j + "&nbsp;&nbsp;&nbsp;</a>"
            }
        } else {
            tempStr += "<上一頁&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
            for (var j = 1; j <= totalPage; j++) {
                tempStr += "<a href=\"#\" onClick=\"goPage(" + j + "," + psize + ")\">" + j + "&nbsp;&nbsp;&nbsp;</a>"
            }
        }
        if (currentPage < totalPage) {
            tempStr += "<a href=\"#\" onClick=\"goPage(" + (currentPage + 1) + "," + psize + ")\">下一頁>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>";
            for (var j = 1; j <= totalPage; j++) {
            }
        } else {
            tempStr += "  下一頁>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
            for (var j = 1; j <= totalPage; j++) {
            }
        }
        document.getElementById("barcon").innerHTML = tempStr;
    }

效果圖 其一

效果圖 其二

下面對代碼進(jìn)行解讀

    goPage(1,15);//指的是當(dāng)前頁為第一頁，15條數(shù)據(jù)為一頁

然后計算出一共分為幾頁

       var totalPage = 0;//總頁數(shù)
        var pageSize = psize;//每頁顯示行數(shù)
        if (num / pageSize > parseInt(num / pageSize)) {//假設(shè)有20條數(shù)據(jù)只怎，15條數(shù)據(jù)頁 
            totalPage = parseInt(num / pageSize) + 1;//1.333>1 ,所以分為兩頁
        } else {
            totalPage = parseInt(num / pageSize);//若有45條數(shù)據(jù)，則分為3頁
        }

計算開始顯示的行數(shù)冲杀，和最后顯示的行數(shù)

       var currentPage = pno;//當(dāng)前頁數(shù)
        var startRow = (currentPage - 1) * pageSize + 1;//開始顯示的行  1
        var endRow = currentPage * pageSize;//結(jié)束顯示的行   15
        endRow = (endRow > num) ? num : endRow;

遍歷顯示數(shù)據(jù)實(shí)現(xiàn)分頁

 for (var i = 1; i < (num + 1); i++) {
            var irow = itable.rows[i - 1];
            if (i >= startRow && i <= endRow) {
                irow.style.display = "block";//當(dāng)前頁的數(shù)據(jù)
            } else {
                irow.style.display = "none";//非當(dāng)前頁的數(shù)據(jù)
            }
        }

實(shí)現(xiàn)最下方的顯示效床，第幾頁，上一頁权谁，下一頁
當(dāng)前頁為第一頁時剩檀，上一頁沒有點(diǎn)擊事件
當(dāng)前頁為最后一頁時，下一頁沒有點(diǎn)擊事件
否則旺芽，上一頁和下一頁均可使用沪猴，點(diǎn)擊某一頁會跳轉(zhuǎn)到那一頁

 if (currentPage > 1) {
            tempStr += "<a href=\"#\" onClick=\"goPage(" + (currentPage - 1) + "," + psize + ")\"><上一頁&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>"
            for (var j = 1; j <= totalPage; j++) {
                tempStr += "<a href=\"#\" onClick=\"goPage(" + j + "," + psize + ")\">" + j + "&nbsp;&nbsp;&nbsp;</a>"
            }
        } else {
            tempStr += "<上一頁&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
            for (var j = 1; j <= totalPage; j++) {
                tempStr += "<a href=\"#\" onClick=\"goPage(" + j + "," + psize + ")\">" + j + "&nbsp;&nbsp;&nbsp;</a>"
            }
        }
        if (currentPage < totalPage) {
            tempStr += "<a href=\"#\" onClick=\"goPage(" + (currentPage + 1) + "," + psize + ")\">下一頁>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>";
            for (var j = 1; j <= totalPage; j++) {
            }
        } else {
            tempStr += "  下一頁>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
            for (var j = 1; j <= totalPage; j++) {
            }
        }

屏幕快照 2017-05-09 15.48.00.png

到此，分頁效果已經(jīng)實(shí)現(xiàn)了采章。