国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁(yè) > 編程 > JavaScript > 正文

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

2019-11-19 18:06:04
字體:
來(lái)源:轉(zhuǎn)載
供稿:網(wǎng)友

用JS實(shí)現(xiàn)前端分頁(yè)頁(yè)碼管理,可以很美觀的區(qū)分頁(yè)碼顯示(這也是參考大多數(shù)網(wǎng)站的分頁(yè)頁(yè)碼展示),能夠有很好的用戶體驗(yàn),這也是有業(yè)務(wù)需要就寫(xiě)了一下,還是新手,經(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í)也希望多多支持武林網(wǎng)!

發(fā)表評(píng)論 共有條評(píng)論
用戶名: 密碼:
驗(yàn)證碼: 匿名發(fā)表
主站蜘蛛池模板: 巫山县| 班玛县| 藁城市| 遂昌县| 青阳县| 方正县| 仙居县| 株洲市| 临城县| 常州市| 辉县市| 台州市| 简阳市| 阿鲁科尔沁旗| 昌图县| 庐江县| 霞浦县| 法库县| 白沙| 利津县| 霍林郭勒市| 宜春市| 抚宁县| 合阳县| 桦甸市| 寿光市| 长寿区| 禄劝| 乐清市| 阿拉尔市| 三门峡市| 许昌县| 永城市| 沈阳市| 文安县| 新竹市| 潼南县| 遵义市| 彰化市| 德化县| 仁化县|