vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)

前端之家收集整理的这篇文章主要介绍了vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

@R_301_161@:

{{item.releasetime.substring(0,19)}}
{{item.title}}
{{item.author}}

{{item.remark}}

<div id="pagination" class="clearfix">

js:

查询相关新闻种类下的所有新闻记录 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","currentPage":parseInt(currentPage)},function(data){ vm.items = data.list; //循环内容 vm.pages = data.totalPage; //总页码 vm.currentPage = data.currentPage; //当前页(添加高亮样式) }); //end post } //end method } }); //end vue

java后台

import java.util.List;

import org.springframework.stereotype.Component;

@Component
public 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();
else
totalPage = totalCount / this.getEveryPage() + 1;
return totalPage;
}

/ 判断是否有上一页 /
public void hasPrevious() {
if (currentPage > 1)
this.setPrev@R_404437@s(true);
else
this.setPrev@R
404_437@s(false);
}

/ 判断是否有下一页 /
public void hasNext() {
if (currentPage < this.getTotalCount())
this.setNext(true);
else
this.setNext(false);
}

public boolean isNext() {
return next;
}

public boolean isPrev@R_404437@s() {
return prev@R
404_437@s;
}

public void setTotalPage(long totalPage) {
this.totalPage = totalPage;
}

public void setNext(boolean next) {
this.next = next;
}

public void setPrev@R_404437@s(boolean prev@R404437@s) {
this.prev@R
404437@s = prev@R404_437@s;
}

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分页中单击页码更换页面内容方法(配合spring springmvc)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/springmvc/33731.html

猜你在找的SpringMVC相关文章