java web 前端頁面的分頁邏輯

來源:互聯網
上載者:User

標籤:

 1 <div class="divBody"> 2   <div class="divContent"> 3     <%--上一頁 --%> 4 <c:choose>//page是你通過查詢出來當前頁得所有的對象資料  pagenum是當前頁  如果=1  那麼(上一頁)的沒有串連的 顯示出來 5     <c:when test="${page.pagenum eq 1 }"><span class="spanBtnDisabled">上一頁</span></c:when> 6     //否則顯示有連結的 上一頁  那麼串連傳值就(當前頁-1)就好了 7     <c:otherwise><a href="你要訪問的servlet或者action&pagenum=${pager.pagenum-1}" class="aBtn bold">上一頁</a></c:otherwise> 8 </c:choose> 9         10         11 12 <%--我們需要計算頁碼列表的開始和結束位置,即兩個變數begin和end13 計算它們需要通過當前頁!14     下面試一頁面只顯示6頁為依據 當然你想顯示多少就顯示多少 可以自己設定15 1. 總頁數不足6頁--> begin=1, end=最大頁16 2. 通過公式設定begin和end,begin=當前頁pagenum-2,end=當前頁pagrnum+317 3. 如果begin<1,那麼讓begin=1,end=6  18 4. 如果end>最大頁, 讓begin=總頁數-5, end=總頁數19  --%>20 21  //總頁數:page.pageCount22  //當前頁:page.pagenum23  <c:choose>24     // 因為我們在頁面上只顯示6頁的資料 如果總頁數小於6也的話 25      <c:when test="${總頁數 <= 6 }">26          <c:set var="begin" value="1"/>//設定begin的值是127          <c:set var="end" value="總頁數"/>//設定end的值是總頁數28      </c:when>29     //否則做以下事情30      <c:otherwise>31         //如果總頁數大於6的話 在這裡我們假設總頁數為7頁 那麼頁面顯示為1 2 3 4 5 6 ... 32         //我們來說一下幾種發生的情況 33         //1.當前頁 如果是第3頁得話 bengin就是3-2=1 end就是3+3=6 那麼頁面顯示就是 1 2 3 4 5 6 ...34         //2.當前頁 如果是第4頁得話  begin就是4-2=2 end就是4+3=7 那麼頁面顯示就是 2 3 4 5 6 7 沒有省略符號了 1和...消失35         //3.當前頁 如果是第5,6,7頁得話  begin就是5-2=3 6-2=4 7-2=5 end就是5+3=8 6+3=9 7+3=10 但是最大頁是7沒有到8 9 10 就會出下以下判斷  頁面顯示  2 3 4 5 6 736         //4.當前頁 如果是第1,2頁得話  begin就是1-2=-1 和2-2=0  end就是1+3=4 2+3=5  但是開始頁begin必須是1 滿足不了情況 就會出下以下判斷 頁面顯示 1 2 3 4 5 6 ...37           <c:set var="begin" value="${當前頁-2 }"/>38          <c:set var="end" value="${當前頁 + 3}"/>39         //如果begin是-1和0的話 小於1  那麼就設定開始頁begin為1  結束頁end為6 頁面顯示1 2 3 4 5 6 ...40          <c:if test="${begin < 1 }">41            <c:set var="begin" value="1"/>42            <c:set var="end" value="6"/>43          </c:if>44         //如果結束end頁 大於了總頁數  也就是上面的第三種情況 end結束頁為8 9 10的話超過總頁數7 那麼設定開始bengin為 當前頁就是總頁數7-5=245         //結束就是總頁數 頁面顯示為 2 3 4 5 6 7 46           <c:if test="${end > 總頁數 }">47            <c:set var="begin" value="${總頁數-5 }"/>48            <c:set var="end" value="${總頁數 }"/>49          </c:if>         50      </c:otherwise>51  </c:choose>52  53  //擷取到begin和end的值迴圈54  <c:forEach begin="${begin }" end="${end }" var="i">55    <c:choose>56          <c:when test="${i eq 當前頁 }">57            <span class="spanBtnSelect">${i }</span>//如果i等於當前頁  那就不給連結58          </c:when>59          <c:otherwise>60            <a href="${你訪問的action或者servlet }&pc=${i}" class="aBtn">${i }</a>//否則就給連結61          </c:otherwise>62    </c:choose>63            64               65  </c:forEach>66     <%-- 計算begin和end --%>67       <%-- 如果總頁數<=6,那麼顯示所有頁碼,即begin=1 end=${總頁數} --%>68         <%-- 設定begin=當前頁碼-2,end=當前頁碼+3 --%>69           <%-- 如果begin<1,那麼讓begin=1 end=6 --%>70           <%-- 如果end>最大頁,那麼begin=最大頁-5 end=最大頁 --%>71 72 73     //如果結束頁小於總頁數7 那麼顯示...74     <%-- 顯示點點點 --%>75     <c:if test="${end < 總頁數 }">76       <span class="spanApostrophe">...</span>77     </c:if> 78 79     80      <%--下一頁 --%>81 <c:choose>82     <c:when test="${當前頁 eq 總頁數 }"><span class="spanBtnDisabled">下一頁</span></c:when>83     <c:otherwise><a href="${你要訪問的action和servlet }&pagenum=${當前頁+1}" class="aBtn bold">下一頁</a></c:otherwise>84 </c:choose>85         86         87     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;88     89     <%-- 共N頁 到M頁 --%>90     <span>共${page.pageCount }頁</span>91     <span>到</span>92     <input type="text" class="inputPageCode" id="pageCode" value="${當前頁 }"/>93     <span>頁</span>94     <a href="javascript:_go();" class="aSubmit">確定</a>95   </div>96 </div>

 

java web 前端頁面的分頁邏輯

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.