溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

js怎么實現(xiàn)簡單分頁導(dǎo)航欄效果

發(fā)布時間：2021-04-19 14:04:58 來源：億速云 閱讀：165 作者：小新 欄目：web開發(fā)

這篇文章主要介紹了js怎么實現(xiàn)簡單分頁導(dǎo)航欄效果，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

具體內(nèi)容如下

最終的效果: 

js怎么實現(xiàn)簡單分頁導(dǎo)航欄效果

1. 分頁需要的幾個重要參數(shù):

總記錄條數(shù): totalCount (查數(shù)據(jù)庫)

每頁記錄數(shù): pageSize  (自己設(shè)置)

總頁數(shù): totalPageNum  (根據(jù)上面的參數(shù)計算) 

當(dāng)前頁: currentPageNum (前臺傳入)

當(dāng)前頁要顯示的內(nèi)容 : List<PageInfo> (查數(shù)據(jù)庫: pageSize和currentPageNum每頁的計算起始記錄索引  

2. 在html頁面中添加分頁導(dǎo)航條的<DIV>

<body>
 <!--分頁導(dǎo)航條 -->
 <div class="page" id="pag" align="center">
 <!--<a href="javascript:void(0);" onclick="js_method($(this).html())">4</a> -->
 </div>
</body>

3. 編寫分頁邏輯的js

<script type="text/javascript">
 $(function () {　
 //這里通過ajax查詢到總記錄數(shù)totalCount
 //設(shè)定每頁顯示記錄數(shù)pageSize,算出總頁數(shù)totalPageNum
  js_method(1,10);
 });
 /**
 * 傳入當(dāng)前頁和和總頁數(shù)
 */
 function js_method(currentPageNum,totalPageNum) {
 currentPageNum = Number(currentPageNum);
  var startPageNum = currentPageNum - 2; //起始頁
  var endPageNum = currentPageNum + 2; //結(jié)束頁
  $("#pag").text("") //清空導(dǎo)航條
  if (startPageNum <= 0) {
  startPageNum = 1
  endPageNum = startPageNum + 4
  }
  if (endPageNum > totalPageNum) {
  endPageNum = totalPageNum
  startPageNum = endPageNum - 4
  }
 
  if (currentPageNum != 1) {
  $("#pag").append(
 "<a href='javascript:void(0);' onclick='js_method(1,"+totalPageNum+")' >首頁</a>"
 )
  $("#pag").append(
  "<a href='javascript:void(0);' onclick='js_method($(\".active\").text()-1,"+totalPageNum+")' id='prePageNum'>&laquo;</a>"
 )
  }
  for (var i = 0; i <= endPageNum; i++) {
  if (i >= startPageNum) {
 
   if (i == currentPageNum) {
   var ele = "<a href='javascript:void(0);' class='active' onclick='js_method($(this).text(),"+totalPageNum+")' >" +
    i + "</a>"
   } else {
   var ele = "<a href='javascript:void(0);' onclick='js_method($(this).text(),"+totalPageNum+")' >" + i + "</a>"
   }
  }
  $("#pag").append(ele)
  }
  if (currentPageNum != totalPageNum) {
  $("#pag").append(
   "<a href='javascript:void(0);' onclick='js_method(Number($(\".active\").text())+1,"+totalPageNum+")' id='prePageNum' rel='pre'>&raquo;</a>"
  )
 $("#pag").append(
 "<a href='javascript:void(0);' onclick='js_method(10,"+totalPageNum+")' >尾頁</a>"
 )
  }
 //在這里通過ajax去查詢當(dāng)前頁的數(shù)據(jù)
 }
 </script>

4. 添加css樣式

.page {
 height: 34px;
 line-height: 34px;
 }
.page a {
 display: inline-block;
 border: 1px solid #ededed;
 padding: 0 12px;
 color: #3e3e3e;
 font-size: 14px;
 font-family: tahoma,simsun;
 text-decoration: none;
 }
.page a:hover {
 color: #f40;
 border-color: #f40;
 }
.page .active,.page .active:hover {
 color: #fff;
 background: #f40;
 border: solid 1px #f40;
}

感謝你能夠認真閱讀完這篇文章，希望小編分享的“js怎么實現(xiàn)簡單分頁導(dǎo)航欄效果”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

js
AI
助
手