当前位置: 代码迷 >> 综合 >> JS 自己写的分页,比较简单
  详细解决方案

JS 自己写的分页,比较简单

热度:22   发布时间:2024-01-09 04:20:03.0

前段的分页现在有很多的插件,自己也一直在用,懒得自己写代码实现,这次不让用插件,只能自己实现了,记录一下

效果:

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