Simple js front page paging example

In java development, paging has always been an important part, but most people use paging plug-ins. The following paging example is for your reference. It is a paging written in pure js code, which can further help you understand the principles and ideas of paging.

HTML code:

<div>
    <table border="1" cellspacing="0" cellpadding="0" style="width:400px;text-align: center;">
	<tr><th>department</th><th>name</th><th>age</th><th>sex</th><th>ethnic</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 code:

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

js code:

<script src="../js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
var departmentInfo = document.getElementById("pageInfo"); /*Get the content in the table*/
var totalRow = departmentInfo.rows.length; /* Calculate the total number (this method is used to get the number of table rows, and to get the number of columns, use var cells = departmentsInfo.rows.items(0).cells.length;*/
var pagesize = 3; /*Number of entries per page*/
var totalPage = Math.ceil(totalRow/pagesize); /* Calculate the total number of pages*/
var currentPage;
was startRow;
var lastRow;
function pagination(i){
    currentPage = i;/*current page*/
    document.getElementById("numPage").value="Page"+currentPage+"Page"; /*Display page number*/
    startRow = (currentPage-1)*pagesize;/*Number of rows showing the first data per page*/
    lastRow = currentPage*pagesize;/*The number of rows of the last data displayed on each page, because the header is also counted as one row, so there is no need to subtract 1 here, this situation is subject to your own actual situation*/
    if(lastRow>totalRow){
	lastRow=totalRow;/*If the number of rows displayed in the last data of the last page is greater than the total number of rows, then let the number of rows of the last row equal to the total number of rows*/
    }
    for(var i = 0;i<totalRow;i++){ /*traverse the data*/
        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>

If you want to display numeric page numbers in pagination, then I suggest you to use js pagination plugin.

I hope to be helpful!

Simple js front page paging example

Guess you like