简单的js前台分页实例

原创 2018年04月16日 15:47:39

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[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分页插件。

希望对大家有所帮助!


收藏助手
不良信息举报
您举报文章:简单的js前台分页实例
举报原因:
原因补充:

(最多只允许输入30个字)