JS 自己寫的分頁,比較簡單
阿新 • • 發佈:2018-12-16
前段的分頁現在有很多的外掛,自己也一直在用,懶得自己寫程式碼實現,這次不讓用外掛,只能自己實現了,記錄一下
效果:
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); }