前段的分页现在有很多的插件,自己也一直在用,懒得自己写代码实现,这次不让用插件,只能自己实现了,记录一下
效果:
HTML代码:
<!-- --------------分页-------------- -->
<div class="go_page" id="pagination" style='display: none;'><ul class="pagination"><li><span class="last-page" aria-hidden="true">< </span></li><li id="currentPage">1</li><li>/</li><li id="totalPage">1</li><li><span class="next-page" disabled="" aria-hidden="true"> ></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);
}