分页2

java开发中，分页一直是一个重要部分，不过大部分人都使用分页插件，下面的分页实例供大家参考，是用纯js代码编写的分页，能够进一步帮助大家理解分页的原理和思路。

HTML代码：

<div>
    <table border="1" cellspacing="0" cellpadding="0" style="width:400px;text-align: center;">
    <tr><th>部门</th><th>姓名</th><th>年龄</th><th>性别</th><th>民族</th></tr>
    <tbody id="pageInfo">
        <tr><td>开发部</td><td>强哥</td><td>22</td><td>男</td><td>汉族</td></tr>
        <tr><td>开发部</td><td>强哥</td><td>22</td><td>男</td><td>汉族</td></tr>
        <tr><td>开发部</td><td>强哥</td><td>22</td><td>男</td><td>汉族</td></tr>
        <tr><td>管理部</td><td>强哥</td><td>22</td><td>男</td><td>汉族</td></tr>
        <tr><td>开发部</td><td>强哥</td><td>22</td><td>男</td><td>汉族</td></tr>
        <tr><td>开发部</td><td>强哥</td><td>22</td><td>男</td><td>汉族</td></tr>
        <tr><td>开发部</td><td>强哥</td><td>22</td><td>男</td><td>汉族</td></tr>
        <tr><td>应用部</td><td>强哥</td><td>22</td><td>男</td><td>汉族</td></tr>
        <tr><td>开发部</td><td>强哥</td><td>22</td><td>男</td><td>汉族</td></tr>
        <tr><td>市场部</td><td>强哥</td><td>22</td><td>男</td><td>汉族</td></tr>
    </tbody>
    </table>
    <div id="pagination" style="margin-top: 10px;height: 35px;">
    <a id="firPage" onclick="firstPage()" style="margin-left: 0px;width: 35px;">首页</a>
    <a id="prePage" onclick="prevPage()">上一页</a>
    <a id="nexPage" onclick="pnextPage()">下一页</a>
    <a id="lasPage" onclick="lastPage()" style="width: 35px;">尾页</a>
    <input id="numPage" style="width: 40px;margin-left: 10px;height: 16px;" />
    </div>
</div>

CSS代码：

<style>
    #pagination a{
        border: 1px solid #000000;
        width: 50px;
        height:20px;
        float: left;
        margin-left: 10px;cursor: pointer;
    }
</style>

js代码：

<script src="../js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
var departmentInfo = document.getElementById("pageInfo");  /*获取table中的内容*/
var totalRow = departmentInfo.rows.length;   /*计算出总条数(这种方法用来获取table行数，获取列数用var cells = departmentsInfo.rows[0].cells.length;*/
var pagesize = 3;   /*每页条数*/
var totalPage = Math.ceil(totalRow/pagesize);  /*计算出总页数*/
var currentPage;
var startRow;
var lastRow;
function pagination(i){
    currentPage = i;/*当前页*/
    document.getElementById("numPage").value="第"+currentPage+"页";   /*显示页码*/
    startRow = (currentPage-1)*pagesize;/*每页显示第一条数据的行数*/
    lastRow = currentPage*pagesize;/*每页显示的最后一条数据的行数,因为表头也算一行，所以这里不需要减1，这种情况以自己的实际情况为准*/
    if(lastRow>totalRow){
    lastRow=totalRow;/*如果最后一页的最后一条数据显示的行数大于总条数，那么就让最后一条的行数等于总条数*/
    }
    for(var i = 0;i<totalRow;i++){   /*将数据遍历出来*/
        var hrow = departmentInfo.rows[i];
    if(i>=startRow&&i<lastRow){
            hrow.style.display="table-row";
        }else{
        hrow.style.display="none";
        }
    }
}
$(function(){
    firstPage();
});
function firstPage(){
    var i = 1;
    pagination(i);
}
function prevPage(){
    var i= currentPage-1;
    if(i<1){
    i=currentPage;
    }
    pagination(i);
}
function pnextPage(){
    var i= currentPage+1;
    if(i>totalPage){
    i= currentPage;
    }
    pagination(i);
}
function lastPage(){
    var i = totalPage;
    pagination(i);
}
</script>

还有个分页 ，是个牛人写的
代码在 Github上了，有兴趣的可以看下~