js实现分页

<table class="table table-hover">
        <thead>
        <tr>
            <th>日期</th>
            <th>小时</th>
            <th>温度</th>
        </tr>
    </thead>
        <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>
       <!--中间省略多行数据-->
       </tbody>
</table>
<ul class="pagination" id="barcon" name="barcon"></ul>//空的div用来放分页后的表格

下面是js分页的代码

goPage(1,6);
function goPage(pno, psize) {
    var itable = document.getElementById("table_body_result");//通过ID找到表格
    var num = itable.rows.length;//表格所有行数(所有记录数)
    var totalPage = 0;//总页数
    var pageSize = psize;//每页显示行数
    //总共分几页
    if (num / pageSize > parseInt(num / pageSize)) {
        totalPage = parseInt(num / pageSize) + 1;
    } else {
        totalPage = parseInt(num / pageSize);
    }
    var currentPage = pno;//当前页数
    var startRow = (currentPage - 1) * pageSize + 1;//开始显示的行  1
    var endRow = currentPage * pageSize;//结束显示的行   15
    endRow = (endRow > num) ? num : endRow;
    //遍历显示数据实现分页
    for (var i = 1; i < (num + 1); i++) {
        var irow = itable.rows[i - 1];
        if (i >= startRow && i <= endRow) {
            irow.className = "show-list";
        } else {
            irow.className = "show-list tr_hide";
        }
    }
    var tempStr = "";
    if (currentPage > 1) {
        tempStr += "<li class='prev'><a href='javascript:void(0)' onClick=\"goPage(" + (currentPage - 1) + "," + psize + ")\"><<&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a><li>";
        for (var j = 1; j <= totalPage; j++) {
            if (currentPage == j) {
            	tempStr += "<li class='active'><a href='javascript:void(0)' onClick=\"goPage(" + j + "," + psize + ")\">" + j + "&nbsp;&nbsp;&nbsp;</a><li>";
            } else {
            	tempStr += "<li><a href='javascript:void(0)' onClick=\"goPage(" + j + "," + psize + ")\">" + j + "&nbsp;&nbsp;&nbsp;</a><li>";
            }
            
        }
    } else {
        tempStr += "<<&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
        for (var j = 1; j <= totalPage; j++) {
        	if (currentPage == j) {
        		tempStr += "<li class='active'><a href='javascript:void(0)' onClick=\"goPage(" + j + "," + psize + ")\">" + j + "&nbsp;&nbsp;&nbsp;</a><li>";
            } else {
            	tempStr += "<li><a href='javascript:void(0)' onClick=\"goPage(" + j + "," + psize + ")\">" + j + "&nbsp;&nbsp;&nbsp;</a><li>";
            }
            
        }
    }
    if (currentPage < totalPage) {
        tempStr += "<li class='next'><a href='javascript:void(0)' onClick=\"goPage(" + (currentPage + 1) + "," + psize + ")\">>>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a><li>";
        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;
}

下面对代码进行解读

goPage(1,15);//指的是当前页为第一页，15条数据为一页

然后计算出一共分为几页

var currentPage = pno;//当前页数
var startRow = (currentPage - 1) * pageSize + 1;//开始显示的行  1
var endRow = currentPage * pageSize;//结束显示的行   15
endRow = (endRow > num) ? num : endRow;

遍历显示数据实现分页

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";//非当前页的数据
    }
}

实现最下方的显示，第几页，上一页，下一页
当前页为第一页时，上一页没有点击事件
当前页为最后一页时，下一页没有点击事件
否则，上一页和下一页均可使用，点击某一页会跳转到那一页

if (currentPage > 1) {
    tempStr += "<li class='prev'><a href='javascript:void(0)' onClick=\"goPage(" + (currentPage - 1) + "," + psize + ")\"><<&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a><li>";
    for (var j = 1; j <= totalPage; j++) {
        if (currentPage == j) {
            tempStr += "<li class='active'><a href='javascript:void(0)' onClick=\"goPage(" + j + "," + psize + ")\">" + j + "&nbsp;&nbsp;&nbsp;</a><li>";
        } else {
            tempStr += "<li><a href='javascript:void(0)' onClick=\"goPage(" + j + "," + psize + ")\">" + j + "&nbsp;&nbsp;&nbsp;</a><li>";
        }
        
    }
} else {
    tempStr += "<<&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
    for (var j = 1; j <= totalPage; j++) {
        if (currentPage == j) {
            tempStr += "<li class='active'><a href='javascript:void(0)' onClick=\"goPage(" + j + "," + psize + ")\">" + j + "&nbsp;&nbsp;&nbsp;</a><li>";
        } else {
            tempStr += "<li><a href='javascript:void(0)' onClick=\"goPage(" + j + "," + psize + ")\">" + j + "&nbsp;&nbsp;&nbsp;</a><li>";
        }
        
    }
}
if (currentPage < totalPage) {
    tempStr += "<li class='next'><a href='javascript:void(0)' onClick=\"goPage(" + (currentPage + 1) + "," + psize + ")\">>>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a><li>";
    for (var j = 1; j <= totalPage; j++) {
    }
} else {
    tempStr += "  >>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
    for (var j = 1; j <= totalPage; j++) {
    }
}