{{page}} {{page}}  1">next

js：

/查詢相關(guān)新聞種類下的所有新聞記錄
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;
//循環(huán)內(nèi)容
 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;
//循環(huán)內(nèi)容
 vm.pages = data.totalPage;
//總頁碼
 vm.currentPage = data.currentPage;
//當前頁(添加高亮樣式)
}); //end post
 } //end method
 }
 }); //end vue

java后臺：

package com.zrq.util;

import java.util.List;

import org.springframework.stereotype.Component;

@Component
public class PageUtil {
/*
* // 默認的每頁記錄數(shù)量(10條) private static final int DEFAULT_PAGE_SIZE = 10; //
* 默認當前頁 private static final int DEFAULT_CURRENT_PAGE = 1;
*/
// 1.每頁顯示數(shù)量(everyPage)
private int everyPage;
// 2.總記錄數(shù)(totalCount)
private long totalCount;
// 3.總頁數(shù)
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;

/* 獲取總頁數(shù) */
public long getTotalPage() {
long remainder = totalCount % this.getEveryPage(); // 剩余數(shù)
if (remainder == 0)
totalPage = totalCount / this.getEveryPage();
else
totalPage = totalCount / this.getEveryPage() + 1;
return totalPage;
}

/* 判斷是否有上一頁 */
public void hasPrevious() {
if (currentPage > 1)
this.setPrevious(true);
else
this.setPrevious(false);
}

/* 判斷是否有下一頁 */
public void hasNext() {
if (currentPage < this.getTotalCount())
this.setNext(true);
else
this.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;
}

}

以上是“vue.js分頁中如何實現(xiàn)單擊頁碼更換頁面內(nèi)容”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！