<section class="container page-home"><div id="main-content" class="wrap-container zerogrid"><article id="news_content" v-for="item in items"><div class="col-1-2 right"><img :src="item.coverimage" class="news_image"/><!-- :要與img標簽之間有空格 --></div><div class="col-1-2 left"><a class="art-category left" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >{{item.releasetime.substring(0,19)}}</a><div class="clear"></div><div class="art-content"><h2>{{item.title}}</h2><div class="info"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >{{item.author}}</a></div><div class="line"></div><p>{{item.remark}}</p><a v-bind:href="['/island/stage/newscontent.html?id='+item.id+'&categoryid='+item.categoryid]" rel="external nofollow" class="more">閱讀全文</a><span href="javascript:;" rel="external nofollow" class="more" style="margin-left:50px;">瀏覽量 : {{item.reading}}</span></div></div></article><!-- 循環結束(新聞) --></div><div id="pagination" class="clearfix"><ul><li v-for="page in pages"><a class="current" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-if="currentPage == page">{{page}}</a><!-- 高亮顯示當前頁 --><a class="choose_page" v-if="currentPage != page" @click="clickpage">{{page}}</a></li><li v-if="pages > 1"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >next</a></li></ul></div></section>

/查詢相關新聞種類下的所有新聞記錄var vm = new Vue({ el: '.page-home',//需要注入的模板的父元素 data: { items : [], pages : [], currentPage : [] }, //end data created:function(){ $.post("/island/stage/queryOneCategoryAllNews.do",{"categoryid":parseInt(categoryid),"currentPage":1},function(data){ vm.pages = data.totalPage;//總頁碼 vm.items = data.list;//循環內容 vm.currentPage = data.currentPage;//當前頁(添加高亮樣式) });//end post }, //created methods:{ clickpage:function(event){ var currentPage = $(event.currentTarget).text(); $.post("/island/stage/queryOneCategoryAllNews.do",{"categoryid":parseInt(categoryid),"currentPage":parseInt(currentPage)},function(data){ vm.items = data.list;//循環內容 vm.pages = data.totalPage;//總頁碼 vm.currentPage = data.currentPage;//當前頁(添加高亮樣式)}); //end post } //end method } }); //end vue

package com.zrq.util;import java.util.List;import org.springframework.stereotype.Component;@Componentpublic class PageUtil {/** // 默認的每頁記錄數量(10條) private static final int DEFAULT_PAGE_SIZE = 10; //* 默認當前頁 private static final int DEFAULT_CURRENT_PAGE = 1;*/// 1.每頁顯示數量(everyPage)private int everyPage;// 2.總記錄數(totalCount)private long totalCount;// 3.總頁數private long totalPage;// 4.當前頁(currentPage)private int currentPage;// 5.起始下標(beginIndex)private int beginIndex;// 6.判斷是否有上一頁private boolean next;// 7.判斷是否有下一頁private boolean previous;// 8.返回列表private List list;/* 獲取總頁數 */public long getTotalPage() {long remainder = totalCount % this.getEveryPage(); // 剩余數if (remainder == 0)totalPage = totalCount / this.getEveryPage();elsetotalPage = totalCount / this.getEveryPage() + 1;return totalPage;}/* 判斷是否有上一頁 */public void hasPrevious() {if (currentPage > 1)this.setPrevious(true);elsethis.setPrevious(false);}/* 判斷是否有下一頁 */public void hasNext() {if (currentPage < this.getTotalCount())this.setNext(true);elsethis.setNext(false);}public boolean isNext() {return next;}public boolean isPrevious() {return previous;}public void setTotalPage(long totalPage) {this.totalPage = totalPage;}public void setNext(boolean next) {this.next = next;}public void setPrevious(boolean previous) {this.previous = previous;}public int getEveryPage() {return everyPage;}public long getTotalCount() {return totalCount;}public int getCurrentPage() {return currentPage;}public int getBeginIndex() {return beginIndex;}public List getList() {return list;}public void setEveryPage(int everyPage) {this.everyPage = everyPage;}public void setTotalCount(long totalCount) {this.totalCount = totalCount;}public void setCurrentPage(int currentPage) {this.currentPage = currentPage;}public void setBeginIndex(int beginIndex) {this.beginIndex = beginIndex;}public void setList(List list) {this.list = list;}public PageUtil(int currentPage, int pageSize) {this.currentPage = currentPage;this.everyPage = pageSize;}public PageUtil() {/** this.currentPage = DEFAULT_CURRENT_PAGE; this.everyPage =* DEFAULT_PAGE_SIZE;*/}public PageUtil(int everyPage, int totalCount, int currentPage,int beginIndex, List list) {super();this.everyPage = everyPage;this.totalCount = totalCount;this.currentPage = currentPage;this.beginIndex = beginIndex;this.list = list;}}