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);
}

猜你喜欢

转载自blog.csdn.net/scanner_new/article/details/83178152