快捷導(dǎo)航

js實(shí)現(xiàn)前端分頁頁碼管理

更新時(shí)間：2017年01月06日 11:11:35 作者：W.Y

本文主要介紹了js實(shí)現(xiàn)前端分頁頁碼管理的具體方法。具有一定的參考價(jià)值，下面跟著小編一起來看下吧

用JS實(shí)現(xiàn)前端分頁頁碼管理，可以很美觀的區(qū)分頁碼顯示（這也是參考大多數(shù)網(wǎng)站的分頁頁碼展示），能夠有很好的用戶體驗(yàn)，這也是有業(yè)務(wù)需要就寫了一下，還是新手，經(jīng)驗(yàn)不足，歡迎指出批評(píng)！

首先先看效果圖：

這是初始頁面（也就是第一頁）的界面，如果為第一頁時(shí)，則首頁和上一頁按鈕不可用，為了展示分頁的效果，我當(dāng)前的分頁是一條一頁。

這是頁碼大于5頁時(shí)展示的效果：1，2頁始終始終顯示（考慮到用戶體驗(yàn)）

這是最后一頁的效果圖：

下面直接上js代碼：

//頁碼顯示
 $(function(){
  var dqPage = $("#dqPage").text();//得到當(dāng)前頁數(shù)
  dqPage = parseInt(dqPage);//得到的文本轉(zhuǎn)成int
  var pageCount = $("#pageCount").text();//得到總頁數(shù)
  pageCount = parseInt(pageCount);
  var i = 1;
  i = parseInt(i);
  var item="";
  var href = "這里是請(qǐng)求地址";
  if (pageCount <= 5 ) {//總頁數(shù)小于五頁，則加載所有頁
  for (i; i <= pageCount; i++) {
   if (i == dqPage) {
   item += "<span class='disabled'>"+i+"</span>"; 
   }else{
   item += "<a href='"+href+i+"' >"+i+"</a>"; 
   }
  };
  $('#pageBtn').append(item);
  return;
  }else if (pageCount > 5) {//總頁數(shù)大于五頁，則加載五頁
  if (dqPage < 5) {//當(dāng)前頁小于5，加載1-5頁
   for (i; i <= 5; i++) {
   if (i == dqPage) {
    item += "<span class='disabled'>"+i+"</span>"; 
   }else{
    item += "<a href='"+href+i+"' >"+i+"</a>"; 
   }
   };
   if (dqPage <= pageCount-2) {//最后一頁追加“...”代表省略的頁
   item += "<span> . . . </span>";
   }
   $('#pageBtn').append(item);
   return;
  }else if (dqPage >= 5) {//當(dāng)前頁大于5頁
   for (i; i <= 2; i++) {//1,2頁碼始終顯示
   item += "<a href='"+href+i+"' >"+i+"</a>"; 
   }
   item += "<span> . . . </span>";//2頁碼后面用...代替部分未顯示的頁碼
   if (dqPage+1 == pageCount) {//當(dāng)前頁+1等于總頁碼
   for(i = dqPage-1; i <= pageCount; i++){//“...”后面跟三個(gè)頁碼當(dāng)前頁居中顯示
    if (i == dqPage) {
    item += "<span class='disabled'>"+i+"</span>"; 
    }else{
    item += "<a href='"+href+i+"' >"+i+"</a>"; 
    }
   }
   }else if (dqPage == pageCount) {//當(dāng)前頁數(shù)等于總頁數(shù)則是最后一頁頁碼顯示在最后
   for(i = dqPage-2; i <= pageCount; i++){//...后面跟三個(gè)頁碼當(dāng)前頁居中顯示
    if (i == dqPage) {
    item += "<span class='disabled'>"+i+"</span>"; 
    }else{
    item += "<a href='"+href+i+"' >"+i+"</a>"; 
    }
   }
   }else{//當(dāng)前頁小于總頁數(shù)，則最后一頁后面跟...
   for(i = dqPage-1; i <= dqPage+1; i++){//dqPage+1頁后面...
    if (i == dqPage) {
    item += "<span class='disabled'>"+i+"</span>"; 
    }else{
    item += "<a href='"+href+i+"' >"+i+"</a>"; 
    }
   }
   item += "<span> . . . </span>";
   }
   $('#pageBtn').append(item);
   return;
  }
  }
 });

<%-- 得到當(dāng)前頁--%>
<span id="dqPage" hidden="hidden" class="disabled1 current">${page}</span>
<%-- js控制的頁碼顯示在這個(gè)div中--%>
<div id="pageBtn" style="width: auto;display:inline-block !important;height: auto;">
</div>

這是實(shí)現(xiàn)js控制頁碼顯示的所有步驟，可能有點(diǎn)麻煩，后續(xù)會(huì)繼續(xù)優(yōu)化，當(dāng)然現(xiàn)在網(wǎng)上也有很多分頁插件，全憑個(gè)人喜好。

至于 “首頁，上一頁，下一頁，末頁，以及跳轉(zhuǎn)頁，這些就看各自的需求實(shí)現(xiàn)了（我是用el表達(dá)式控制的）”

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章: