本文僅為自己記錄下編寫過程，如有興趣，或者疑問，請與我聯系。
寫前背景:java開發工作經驗一年，現項目為SSM框架，使用maven管理項目。需要頁面查詢實現分頁，網上找了很多插件，單獨頁面實現是好的，可是放到我的頁面就沒有效果，苦于自己也找不到原因，故寫以下代碼，很是粗糙，不過懶得整理成js文件了。
效果：第一頁時，首頁和上一頁為不可點擊，最后一頁時，下一頁和尾頁不可點擊，頁數只會顯示5個
實現的js:
//分頁function$(document).ready(function(){ //獲取分頁數 var talPage = ${countPage}; //獲取當前頁數 var pageIndex = ${pageIndex}; var ul = document.getElementById("getPage"); document.getElementById("getPage").innerHTML=""; var li_0 = document.createElement("li"); li_0.innerHTML = "總共："+${count}+"條，共："+${countPage }+"頁，每頁：10條"; ul.appendChild(li_0); if(talPage==1 || pageIndex == 1){//第一頁首頁和上一頁不可操作 var li_1 = document.createElement("li"); li_1.setAttribute("class","pageItemDisable bt4"); li_1.setAttribute("onclick","pageClick(this)") li_1.innerHTML = "首頁"; 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 = "上一頁" 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 = "首頁"; 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 = "上一頁" ul.appendChild(li_2); } //之前需要將，上一頁創建出來 if(talPage<=5){ //總頁數在0到5之間時，顯示實際的頁數 for(var i=0;i<talPage;i++){ if(i+1 == pageIndex){//循環數和當前頁相等時,為當前頁樣式 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){ //總頁數大于5時，只顯示五頁，多出的隱藏 //判斷當前頁的位置 if(pageIndex<=3){//當前頁小于等于3時，顯示1-5 for(var i=0;i<5;i++){ if(i+1 == pageIndex){//循環數和當前頁相等時,為當前頁樣式 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){//當前頁為最后五頁時 for(var i=talPage-5;i<talPage;i++){ if(i+1 == pageIndex){//循環數和當前頁相等時,為當前頁樣式 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{//當前頁為中間時 for(var i=pageIndex-3;i<pageIndex+2;i++){ if(i+1 == pageIndex){//循環數和當前頁相等時,為當前頁樣式 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){//當前頁為最大頁時，下一個和尾頁不可操作 var li_3 = document.createElement("li"); li_3.setAttribute("class","pageItemDisable bt4"); li_3.setAttribute("onclick","pageClick(this)") li_3.innerHTML = "下一頁" 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 = "尾頁" 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 = "下一頁" 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 = "尾頁" ul.appendChild(li_4); } if(0 == talPage){//一頁都沒有時，將首頁，上一頁，下一個，尾頁都置為不可操作 $(".bt4").removeClass("pageItem"); $(".bt4").addClass("pageItemDisable"); }});//分頁的按鈕的點擊事件function pageClick(obj){ var talPage = ${countPage};//總頁數 var pageIndex = ${pageIndex};//當前頁數 var text = obj.innerText;//點擊標簽的值 var url = "<%=path%>/service/getServiceList.action"; //如果為不可操作的直接返回false if($(obj).attr("class").indexOf("pageItemDisable")>=0){ return false; } with(document.forms["serviceForm"]){ if("首頁" == text){ action = url; }else if("上一頁" == text){ //計算出上一頁到底是第幾頁 //第一種方法，獲取當前li中class為pageItemActive的標簽，取其值 //第二種方法，直接el ${pageIndex}獲取當前頁數，然后-1 //var a = $(obj).parent().children("pageItemActive").html(); //如果當前頁是1，不-,地址和首頁相同 if(pageIndex <= 1){ action = url; }else{ action = url+"?pageIndex="+(pageIndex-1); } }else if("下一頁" == text){ //如果當前頁為尾頁，則下一頁為尾頁，url跟當前url一樣 if(pageIndex == talPage){ action = url; }else{ action = url+"?pageIndex="+(pageIndex+1); } }else if("尾頁" == text){ //如果當前頁為尾頁，則url不變 if(pageIndex == talPage){ action = url; }else{ action = url+"?pageIndex="+talPage; } }else{ //點擊頁數時 action = url+"?pageIndex="+text; } submit(); }}頁面元素：
<ul id="getPage" class="page" style="list-style-type:none;"></ul>
所用到的css樣式：
<style type="text/css"> <!-- 分頁處的樣式 --> .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中處理：
//獲取當前頁 String pageIndex = "1";//默認為第一頁 if(null != request.getParameter("pageIndex") && !"".equals(request.getParameter("pageIndex"))){ pageIndex = (String)request.getParameter("pageIndex"); } //最后需要將當前頁返回給前臺，用于樣式的展示 request.setAttribute("pageIndex", pageIndex); //一頓計算。。。。,取得startNum,endNum String startNum = Integer.toString(((Integer.parseInt(pageIndex)-1)*10)+1); String endNum = Integer.toString(Integer.parseInt(startNum)+9); //根據條件查詢 List<Service> serviceList = serviceServiceImpl.findAll(service,startNum,endNum); //查詢出總數，用作分頁 Integer serviceCount = serviceServiceImpl.getServiceCount(service); request.setAttribute("count",serviceCount);//總數 Integer countPage = serviceCount/10; if((serviceCount/10.0-serviceCount/10)>0){//有小數，總頁數+1 countPage = countPage+1; } request.setAttribute("countPage",countPage);//總頁數以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
