1. 程式人生 > >JS 自己寫的分頁,比較簡單

JS 自己寫的分頁,比較簡單

前段的分頁現在有很多的外掛,自己也一直在用,懶得自己寫程式碼實現,這次不讓用外掛,只能自己實現了,記錄一下

效果:

HTML程式碼:

<!-- --------------分頁-------------- -->
<div class="go_page" id="pagination" style='display: none;'>
	<ul class="pagination">
     <li><span class="last-page"  aria-hidden="true">&lt;&nbsp;&nbsp;</span></li>
     <li id="currentPage">1</li>
     <li>/</li>
     <li id="totalPage">1</li>
     <li><span class="next-page" disabled="" aria-hidden="true">&nbsp;&nbsp;&gt;</span>/li>
    </ul>
	<ul class="jump_page">
	 <li><span class="jump-to"><b>JUMP TO</b></span></li>  
	 <li><input type="text" class="input-value" value="1" id="toPage"></li>
	 <li><button class="btn btn-success go-btn jump-btn" type="button" 
          onClick='gotoPage()'>GO</button></li>
	</ul>
</div>
<!-- -------分頁結束-----------------------  -->

 JS程式碼:

$(document).ready(function(){

//分頁 上一頁
$(document).on('click','.last-page',function(){
	var currPage = parseInt($('#currentPage').html());
	var lastPage = currPage-1;
	if(lastPage < 1){
		$('#currentPage').html(1);
	}else{
		$('#currentPage').html(lastPage);
		paginationRequest(); <!-- 獲取後臺資料的方法 -->
	}
});
//分頁 下一頁
$(document).on('click','.next-page',function(){
	var currPage = parseInt($('#currentPage').html());
	var nextPage = currPage+1;
	var pageCount = $('#totalPage').html();
	if(nextPage <= pageCount){
		$('#currentPage').html(nextPage);
		paginationRequest();
	}else{
		$('#currentPage').html(pageCount);
	}
});

//分頁處理
function pagination(currentPage,totalPage){
	if(totalPage == 1){
		$('#pagination').hide();
	}else{
		$('#pagination').show();
		$('#currentPage').html(currentPage);
		$('#totalPage').html(totalPage);
	}
}

})

//跳轉
function gotoPage(){
	params.pageNum = $.trim($('#toPage').val());
	getMappingData(displayUrl,params);	<!-- 獲取後臺資料的方法 -->
}
//分頁請求資料
function paginationRequest(){
	params.pageNum = $('#currentPage').html();
	getMappingData(displayUrl,params);
}