前段的分页现在有很多的插件,自己也一直在用,懒得自己写代码实现,这次不让用插件,只能自己实现了,记录一下
效果:
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);
}