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

更新時間：2019年06月28日 14:30:16 作者：霜葉的季節(jié)z

這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)簡單分頁導(dǎo)航欄效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js實現(xiàn)分頁導(dǎo)航欄效果的具體代碼，供大家參考，具體內(nèi)容如下

最終的效果:

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: