The paging here is extracted and made into a template for use by other pages, loadData(this.currentPage, this.pagesize); This method is the method of other pages. Note that the page here cannot be managed by the vue instance of other pages. Otherwise, some js failures will occur, such as: page b needs to introduce a (paging) page, the vue instance of page b is bApp, and the a (paging) page is aApp, which needs to be used in this way
b.jsp page:
Correct usage:
</body>
<div id="bApp">
</div>
<div class="block">
<jsp:include page="a.jsp"></jsp:include>
</div>
</body>
Incorrect usage:
</body>
<div id="bApp">
<div class="block"> <jsp:include page="a.jsp"></jsp:include></div>
</div>
</body>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>分页</title>
<script type="text/javascript" src="JS/jquery-1.10.2.min.js"></script>
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<script src="JS/axios.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="//unpkg.com/[email protected]/lib/theme-chalk/index.css">
</head>
<body>
<div id="paginationApp">
<el-pagination @size-change="handleSizeChange"
@current-change="handleCurrentChange" :current-page="currentPage"
:page-sizes="[5, 10, 15, 20]" :page-size="pagesize"
:total="totalCount" style="float:center"
layout="total, sizes, prev, pager, next, jumper"> </el-pagination>
</div>
</body>
<script type="text/javascript">
var paginationVue=new Vue({
el:"#paginationApp",
data:{//默认每页数据量
pagesize: 5,
//默认当前页
currentPage: 1,
//默认数据总数
totalCount: 1000, }, watch :{ currentPage:function(val){ loadData(val, this.pagesize);
},
pagesize:function(val){
loadData(this.currentPage,val);
}
},
methods:{
handleSizeChange:function(val) {
this.pagesize = val;
//loadData(this.currentPage, this.pagesize); This is abolished, and the listener is used to dynamically obtain data
},
handleCurrentChange:function(val) {
this.currentPage = val;
// loadData(this.currentPage, this.pagesize);
}, } }) </script> </html >