這篇文章主要介紹js如何實(shí)現(xiàn)分頁(yè)功能，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)公司專注于企業(yè)營(yíng)銷型網(wǎng)站、網(wǎng)站重做改版、鄠邑網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5網(wǎng)站設(shè)計(jì)、商城系統(tǒng)網(wǎng)站開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為鄠邑等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

js的作用是什么

1、能夠嵌入動(dòng)態(tài)文本于HTML頁(yè)面。2、對(duì)瀏覽器事件做出響應(yīng)。3、讀寫HTML元素。4、在數(shù)據(jù)被提交到服務(wù)器之前驗(yàn)證數(shù)據(jù)。5、檢測(cè)訪客的瀏覽器信息。6、控制cookies，包括創(chuàng)建和修改等。7、基于Node.js技術(shù)進(jìn)行服務(wù)器端編程。

寫前背景:java開發(fā)工作經(jīng)驗(yàn)一年，現(xiàn)項(xiàng)目為SSM框架，使用maven管理項(xiàng)目。需要頁(yè)面查詢實(shí)現(xiàn)分頁(yè)，網(wǎng)上找了很多插件，單獨(dú)頁(yè)面實(shí)現(xiàn)是好的，可是放到我的頁(yè)面就沒有效果，苦于自己也找不到原因，故寫以下代碼，很是粗糙，不過懶得整理成js文件了。

效果：第一頁(yè)時(shí)，首頁(yè)和上一頁(yè)為不可點(diǎn)擊，最后一頁(yè)時(shí)，下一頁(yè)和尾頁(yè)不可點(diǎn)擊，頁(yè)數(shù)只會(huì)顯示5個(gè)

實(shí)現(xiàn)的js:

//分頁(yè)function
$(document).ready(function(){
 //獲取分頁(yè)數(shù)
 var talPage = ${countPage};
 //獲取當(dāng)前頁(yè)數(shù)
 var pageIndex = ${pageIndex};
 var ul = document.getElementById("getPage");
 document.getElementById("getPage").innerHTML="";
 var li_0 = document.createElement("li");
 li_0.innerHTML = "總共："+${count}+"條，共："+${countPage }+"頁(yè)，每頁(yè)：10條";
 ul.appendChild(li_0);
 if(talPage==1 || pageIndex == 1){//第一頁(yè)首頁(yè)和上一頁(yè)不可操作
  var li_1 = document.createElement("li");
  li_1.setAttribute("class","pageItemDisable bt4");
  li_1.setAttribute("onclick","pageClick(this)")
  li_1.innerHTML = "首頁(yè)";
  ul.appendChild(li_1);
  var li_2 = document.createElement("li");
  li_2.setAttribute("class","pageItemDisable bt4");
  li_2.setAttribute("onclick","pageClick(this)")
  li_2.innerHTML = "上一頁(yè)"
  ul.appendChild(li_2);
 }else{
  var li_1 = document.createElement("li");
  li_1.setAttribute("class","pageItem bt4");
  li_1.setAttribute("onclick","pageClick(this)")
  li_1.innerHTML = "首頁(yè)";
  ul.appendChild(li_1);
  var li_2 = document.createElement("li");
  li_2.setAttribute("class","pageItem bt4");
  li_2.setAttribute("onclick","pageClick(this)")
  li_2.innerHTML = "上一頁(yè)"
  ul.appendChild(li_2);
 }
 //之前需要將，上一頁(yè)創(chuàng)建出來
 if(talPage<=5){
  //總頁(yè)數(shù)在0到5之間時(shí)，顯示實(shí)際的頁(yè)數(shù)
  for(var i=0;i<talPage;i++){
   if(i+1 == pageIndex){//循環(huán)數(shù)和當(dāng)前頁(yè)相等時(shí),為當(dāng)前頁(yè)樣式
    var li = document.createElement("li");
    li.setAttribute("class","pageItemActive");
    li.setAttribute("onclick","pageClick(this)")
    li.innerHTML = i+1;
    ul.appendChild(li);
   }else{
    var li = document.createElement("li");
    li.setAttribute("class","pageItem");
    li.setAttribute("onclick","pageClick(this)")
    li.innerHTML = i+1;
    ul.appendChild(li);
   }

  }
 }else if(talPage>5){
  //總頁(yè)數(shù)大于5時(shí)，只顯示五頁(yè)，多出的隱藏
  //判斷當(dāng)前頁(yè)的位置
  if(pageIndex<=3){//當(dāng)前頁(yè)小于等于3時(shí)，顯示1-5
   for(var i=0;i<5;i++){
    if(i+1 == pageIndex){//循環(huán)數(shù)和當(dāng)前頁(yè)相等時(shí),為當(dāng)前頁(yè)樣式
     var li = document.createElement("li");
     li.setAttribute("class","pageItemActive");
     li.setAttribute("onclick","pageClick(this)")
     li.innerHTML = i+1;
     ul.appendChild(li);
    }else{
     var li = document.createElement("li");
     li.setAttribute("class","pageItem");
     li.setAttribute("onclick","pageClick(this)")
     li.innerHTML = i+1;
     ul.appendChild(li);
    }
   }
  }else if(pageIndex>talPage-5){//當(dāng)前頁(yè)為最后五頁(yè)時(shí)
   for(var i=talPage-5;i<talPage;i++){
    if(i+1 == pageIndex){//循環(huán)數(shù)和當(dāng)前頁(yè)相等時(shí),為當(dāng)前頁(yè)樣式
     var li = document.createElement("li");
     li.setAttribute("class","pageItemActive");
     li.setAttribute("onclick","pageClick(this)")
     li.innerHTML = i+1;
     ul.appendChild(li);
    }else{
     var li = document.createElement("li");
     li.setAttribute("class","pageItem");
     li.setAttribute("onclick","pageClick(this)")
     li.innerHTML = i+1;
     ul.appendChild(li);
    }
   }
  }else{//當(dāng)前頁(yè)為中間時(shí)
   for(var i=pageIndex-3;i<pageIndex+2;i++){
    if(i+1 == pageIndex){//循環(huán)數(shù)和當(dāng)前頁(yè)相等時(shí),為當(dāng)前頁(yè)樣式
     var li = document.createElement("li");
     li.setAttribute("class","pageItemActive");
     li.setAttribute("onclick","pageClick(this)")
     li.innerHTML = i+1;
     ul.appendChild(li);
    }else{
     var li = document.createElement("li");
     li.setAttribute("class","pageItem");
     li.setAttribute("onclick","pageClick(this)")
     li.innerHTML = i+1;
     ul.appendChild(li);
    }
   } 
  }
 }
 if(pageIndex == talPage){//當(dāng)前頁(yè)為最大頁(yè)時(shí)，下一個(gè)和尾頁(yè)不可操作
  var li_3 = document.createElement("li");
  li_3.setAttribute("class","pageItemDisable bt4");
  li_3.setAttribute("onclick","pageClick(this)")
  li_3.innerHTML = "下一頁(yè)"
  ul.appendChild(li_3);
  var li_4 = document.createElement("li");
  li_4.setAttribute("class","pageItemDisable bt4");
  li_4.setAttribute("onclick","pageClick(this)")
  li_4.innerHTML = "尾頁(yè)"
  ul.appendChild(li_4);
 }else{
  var li_3 = document.createElement("li");
  li_3.setAttribute("class","pageItem bt4");
  li_3.setAttribute("onclick","pageClick(this)")
  li_3.innerHTML = "下一頁(yè)"
  ul.appendChild(li_3);
  var li_4 = document.createElement("li");
  li_4.setAttribute("class","pageItem bt4");
  li_4.setAttribute("onclick","pageClick(this)")
  li_4.innerHTML = "尾頁(yè)"
  ul.appendChild(li_4);
 }
 if(0 == talPage){//一頁(yè)都沒有時(shí)，將首頁(yè)，上一頁(yè)，下一個(gè)，尾頁(yè)都置為不可操作
   $(".bt4").removeClass("pageItem");
   $(".bt4").addClass("pageItemDisable");
 }

});
//分頁(yè)的按鈕的點(diǎn)擊事件
function pageClick(obj){
 var talPage = ${countPage};//總頁(yè)數(shù)
 var pageIndex = ${pageIndex};//當(dāng)前頁(yè)數(shù)
 var text = obj.innerText;//點(diǎn)擊標(biāo)簽的值
 var url = "<%=path%>/service/getServiceList.action";
 //如果為不可操作的直接返回false
  if($(obj).attr("class").indexOf("pageItemDisable")>=0){
  return false;
 } 
 with(document.forms["serviceForm"]){
  if("首頁(yè)" == text){
   action = url;

  }else if("上一頁(yè)" == text){
   //計(jì)算出上一頁(yè)到底是第幾頁(yè)
   //第一種方法，獲取當(dāng)前l(fā)i中class為pageItemActive的標(biāo)簽，取其值
   //第二種方法，直接el ${pageIndex}獲取當(dāng)前頁(yè)數(shù)，然后-1
   //var a = $(obj).parent().children("pageItemActive").html();
   //如果當(dāng)前頁(yè)是1，不-,地址和首頁(yè)相同
   if(pageIndex <= 1){
    action = url;   
   }else{
    action = url+"?pageIndex="+(pageIndex-1);
   }
  }else if("下一頁(yè)" == text){
   //如果當(dāng)前頁(yè)為尾頁(yè)，則下一頁(yè)為尾頁(yè)，url跟當(dāng)前url一樣
   if(pageIndex == talPage){
    action = url;
   }else{
    action = url+"?pageIndex="+(pageIndex+1);
   }
  }else if("尾頁(yè)" == text){
   //如果當(dāng)前頁(yè)為尾頁(yè)，則url不變
   if(pageIndex == talPage){
    action = url;
   }else{
    action = url+"?pageIndex="+talPage;
   }
  }else{
   //點(diǎn)擊頁(yè)數(shù)時(shí)
   action = url+"?pageIndex="+text;

  }
  submit();
 }

}

頁(yè)面元素：

<ul id="getPage" class="page" ></ul>

所用到的css樣式：

<style type="text/css">
 <!-- 分頁(yè)處的樣式 -->
 .page{
 list-style: none;
}
.page>li{
 float: left;
 padding: 5px 10px;
 cursor: pointer;
}
.page .pageItem{
 border: solid thin #DDDDDD;
 margin: 5px;
}
.page .pageItemActive{
 border: solid thin #0099FF;
 margin: 5px;
 background-color: #0099FF;
 color:white;
}
.page .pageItem:hover{
 border: solid thin #0099FF;
 background-color: #0099FF;
 color:white;
}
.page .pageItemDisable{
 border: solid thin #DDDDDD;
 margin: 5px;
 background-color: #DDDDDD;
}

</style>

java中處理：

//獲取當(dāng)前頁(yè)
   String pageIndex = "1";//默認(rèn)為第一頁(yè)
   if(null != request.getParameter("pageIndex") && !"".equals(request.getParameter("pageIndex"))){
    pageIndex = (String)request.getParameter("pageIndex");
   }
   //最后需要將當(dāng)前頁(yè)返回給前臺(tái)，用于樣式的展示
   request.setAttribute("pageIndex", pageIndex);
   //一頓計(jì)算。。。。,取得startNum,endNum
   String startNum = Integer.toString(((Integer.parseInt(pageIndex)-1)*10)+1);
   String endNum = Integer.toString(Integer.parseInt(startNum)+9);
   //根據(jù)條件查詢
   List<Service> serviceList = serviceServiceImpl.findAll(service,startNum,endNum);
   //查詢出總數(shù)，用作分頁(yè)
   Integer serviceCount = serviceServiceImpl.getServiceCount(service);
   request.setAttribute("count",serviceCount);//總數(shù)
   Integer countPage = serviceCount/10;
   if((serviceCount/10.0-serviceCount/10)>0){//有小數(shù)，總頁(yè)數(shù)+1
    countPage = countPage+1;
   }
   request.setAttribute("countPage",countPage);//總頁(yè)數(shù)

以上是“js如何實(shí)現(xiàn)分頁(yè)功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享標(biāo)題：js如何實(shí)現(xiàn)分頁(yè)功能
文章轉(zhuǎn)載：http://aaarwkj.com/article22/iipejc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、全網(wǎng)營(yíng)銷推廣、網(wǎng)站排名、網(wǎng)站改版、品牌網(wǎng)站制作、定制開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)