快捷導(dǎo)航

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

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

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

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

首先先看效果圖：

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

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

這是最后一頁(yè)的效果圖：

下面直接上js代碼：

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

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

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

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

您可能感興趣的文章: