简单的js前台分页实例

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 type="text/css">
	#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.items(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>

如果想在分页中显示数字页码，那么我建议你使用js分页插件。

希望对大家有所帮助！