vue.js分页中单击页码更换页面内容(配合spring springmvc)
来源:互联网 发布:数控冲床编程教程 编辑:程序博客网 时间:2024/06/10 14:44
html代码:
<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="#">{{item.releasetime.substring(0,19)}}</a>
<div class="clear"></div>
<div class="art-content">
<h2>{{item.title}}</h2>
<div class="info">
<a href="#">{{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]" class="more">阅读全文</a>
<span href="javascript:;" 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="#" 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="#">next</a></li>
</ul>
</div>
</section>
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",{"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
java后台:
package com.zrq.util;
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.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分页中单击页码更换页面内容(配合spring springmvc)
- [js]分页页面只显示五个页码
- js分页页码
- js分页页码
- dql分页页面显示页码
- Spring MVC中实现页面更换头像
- js分页,显示/隐藏页码
- springMVC分页页码过多的问题
- js选中页面中内容
- Bootstrap jquery.twbsPagination.js动态页码分页
- JS实现简单分页,页码显示
- jquery.twbsPagination.js动态页码分页demo
- 在分页中控制由用户输入页码来跳转的JS函数
- vue项目中-打印页面中部分区域的内容
- 分页页码
- 分页页码
- Spring Data Jpa+SpringMVC+Jquery.pagination.js实现分页
- Vue.js鼠标悬浮更换图片
- ffmpeg编译过程(二)-->Linux下的编译常用命令
- shell脚本实现学生管理系统
- 最长公共子序列 LCS 【长度及打印】
- JSP页-servlet-JSP页
- 用div绘制箭头
- vue.js分页中单击页码更换页面内容(配合spring springmvc)
- HDU_1231 最大连续子序列 【动态规划】
- 根据腾讯公开的JS文件分析QQTEA算法
- (转)Git Cheat Sheet 中文版
- VBA编程实现EXECL根据表2数据修改表1
- Android使用Intent传递对象的两种方式
- BZOJ3450: Tyvj1952 Easy
- Android Studio项目 目录含义
- Android 多线程编程