对于有多个页面，切换，并要求每个页面进行上下页时wo的思路：记一笔，日后可以看看
后台查出3个页面分别对应的数据，得到pageInfo时，将3个页面的pageInfo用一个共同的pageInfo接，这样传前台的pageInfo只有一个，但是我们怎么知道传到前台的是哪个页面的pageInfo呢，很简单，将这2个参数放到返回给前台的json对象中，一个是pageInfo，另一个是针对页面的状态码，并且将这个json对象公共声明，每写完一个查询方法，就将这个json对象重新赋值，这样每次操作传到前台的就只有一个json对象,而前台可以根据带的状态吗来判断当前操作的那个页面，就可以对当前页面的pageInfo进行操作了，所有pageInfo的属性都是针对当前页面操作的，切记每次操作上下页，尾页时成功时一定要将当前页面pageInfo的pageNum重新赋值，因为我默认查询的就是第一页首页，所以操作首页时也只是调用页面里写好的查询方法，所以不用对当前页码进行操作~~
1 前台页面表格格式~
<template>
<div class="home_css">
<el-container>
<el-header>
<h4>欢迎来到你的事项安排页呢~<i class="el-icon-notebook-2"></i></h4>
</el-header>
<el-container>
<el-aside width="200px" align="center">
<el-button size="medium" @click="Getalllist">所有事项<i class="el-icon-reading el-icon--right"></i></el-button>
</el-aside>
<el-container>
<el-main>
<!--数据显示-->
<el-table :data="tableData" border align="center">
<el-table-column label="id" width="10" v-show="false">
<template scope="scope"></template>
</el-table-column>
<el-table-column label="名字" width="120">
<template scope="scope">
<span>{{scope.row.name}}</span >
</template>
</el-table-column>
<el-table-column label="内容" width="180">
<template scope="scope"><span>{{scope.row.content}}</span ></template>
</el-table-column>
</el-table>
<!--分页开始~~ -->
<div>
<el-button-group class="textpage">
<el-button type="primary" icon="el-icon-location-outline" @click="firstpage">
首页</el-button>
<el-button type="primary" icon="el-icon-arrow-left" :disabled="leftpagebutton" @click="leftpage">
上一页</el-button>
<el-button type="primary" :disabled="rightpagebutton" @click="rightpage" >
下一页<i class="el-icon-arrow-right el-icon--right" ></i></el-button>
<el-button type="primary" @click="laterpage">
尾页<i class="el-icon-location-information el-icon--right"></i></el-button>
</el-button-group>
</div>
<el-footer align="center">
<h4>今天也要加油呢~<i class="el-icon-dessert"></i></h4>
</el-footer>
</el-container>
</el-container>
</el-container>
</div>
</template>
2 定义前台de参数~~
<script>
import Qs from 'qs';
export default {
data() {
return {
tableData: [{
id:'',
name: '',
}],
//分页对象pageInfo
page_info:{
pageNum:'',//当前第几页
pages:'',//共几页
total:'',//共几条记录
},
//页面对应的状态码,所有事项1，未完成试事项2，完成事项3
pageInfo_code:'',
};
},
3 开始定义前台的定义方法喽~
methods: {
Getalllist:function(){
alert("进入Gettodolist~");
if(this.leftpagebutton=true){ //这是设置按钮是否禁用，如果按钮在别的页面禁用了，我就改成可以用
this.leftpagebutton=false;
}
this.$http.get('/tolist/getAllLists')
.then(response =>{
if(response.data.code===0){
//将页面状态码给本页面的对应的页面状态码对象，用于下面方法判断对那个页面进行操作~
this.pageInfo_code=response.data.pagecode;
//将分页对象给本页面的分页对象 重点~~
this.page_info=response.data.pageinfo;
this.tableData=[];
this.tableData=response.data.sata;
console.log(response);
}
}).catch(error =>{
console.log(error);
});
},
//上一页方法,后台响应的结果有可按和不可按 ->bingo
leftpage:function () {
if(this.page_info.pageNum===1){ //证明当前页面已经是第一页了
//上一页按钮禁用
//this.leftpagebutton=true;
alert("当前已经是第一页了~~")
}else{
//发送请求
this.$http.post('/tolist/PageButton',
Qs.stringify({
pageNum:(this.page_info.pageNum-1), //不是第一页就将当前页面减1 发送给后台
pageInfo_code:this.pageInfo_code
})
).then(response =>{
if(response.data.code===0){
//将当前页码减一
this.page_info.pageNum=this.page_info.pageNum-1;
alert("leftpage当前页"+this.page_info.pageNum);
this.tableData=response.data.sata;
}
}).catch(error =>{
console.log(error);
})
}
},
//下一页方法 ->bingo
rightpage:function () {
//如果当前页面已经是最后一页
if(this.page_info.pageNum>=this.page_info.pages){
alert("当前已经是最后一页了~~")
}else{
this.$http.post('/tolist/PageButton',
Qs.stringify({
pageNum:(this.page_info.pageNum+1),
pageInfo_code:this.pageInfo_code}))
.then(response =>{
if(response.data.code===0){
//将当前页码加一
this.page_info.pageNum=this.page_info.pageNum+1;
alert("rightpage当前页"+this.page_info.pageNum);
this.tableData=response.data.sata;
}
}).catch(error =>{
console.log(error);
})
}
},
//尾页方法
laterpage:function () {
alert("laterpage~");
//判断当前操作的是否为尾页
if(this.page_info.pageNum===this.page_info.pages){
alert("已经在尾页喽~"+this.page_info.pageNum);
}else{//不是尾页则向后台发送请求要数据
this.$http.post('/tolist/PageButton',
Qs.stringify({
pageNum:this.page_info.pages,
pageInfo_code:this.pageInfo_code}))
.then(response =>{
if(response.data.code===0){
//将当前页码改成尾页
this.page_info.pageNum=this.page_info.pages;
this.tableData=response.data.sata;
}
}).catch(error =>{
console.log(error);
});
}
}
}
4 后台service层
/**
* 定义分页对象
*/
private PageInfo<ListBean> pageInfo =null;
/**
* 得到所有事项的方法实现类
* pageinfoAll_code =1;
* @return
*/
@Override
public JsonList getAllListService(Integer pageNum,Integer pageSize) {
PageHelper.startPage(pageNum,pageSize);//进行分页
List<ListBean> arr=listMapper.getAllLists();//从mapper层得到数据
pageInfo = new PageInfo<ListBean>(arr);//对其进行分页
JsonList jsonList=new JsonList();
if (arr!=null){
jsonList.setCode(JsonResponse.success);
jsonList.setMsg(JsonResponse.successMsg);
jsonList.setSata(arr);
//将分页标识符给到响应到页面的json的对象
jsonList.setPagecode(JsonResponse.pageinfoAll_code);
//将分页对象给到响应到页面的json对象
jsonList.setPageinfo(pageInfo);
return jsonList;
}
jsonList.setCode(JsonResponse.fail);
jsonList.setMsg(JsonResponse.failMsg);
return jsonList;
}
/**
* 上一页,下一页方法，前台传来想要去的第几页页数，以及代表要操作那个页面的状态码
* 以及将这页的数据传回去,
* pageNum当前页数
* pageSize每页的数据 用默认值即可不用传数据
* pageInfo_code 代表每页的状态码
*/
public JsonList PageButton(Integer pageNum,Integer pageSize,Integer pageInfo_code){
System.out.print("pageNum~~"+pageNum
+"pageSize~~~"+pageSize+"pageInfo_code~~~"+pageInfo_code);
JsonList jsonList=new JsonList();
//得到总页数
int countPages=pageInfo.getPages();
//如果当前页面符合要求，才会进行操作
if((pageNum<=countPages)&&(pageNum>0)) {
//所有事项页面，所有事项方法返回值也是json类型
if (pageInfo_code == 1) {
return getAllListService(pageNum, pageSize);
}
//未完成事项页面
else if (pageInfo_code == 2) {
return getYesListsService(pageNum, pageSize);
}
//完成事项页面
else if (pageInfo_code == 3) {
return getNoListsService(pageNum, pageSize);
}
}
return null;
}
5 后台控制层
@RestController
public class ToListController {
/**
* 注入得到所有事项的服务层
*/
@Autowired
private ListServiceImp listServiceImp;
/**
* 访问得到所有事项的方法
*/
@GetMapping(value = "/tolist/getAllLists")
public JsonList getAllCon(
@RequestParam(defaultValue = "1",value = "pageNum")Integer pageNum,
@RequestParam(defaultValue = "6",value = "pageSize")Integer pageSize){
return listServiceImp.getAllListService(pageNum,pageSize);
}
/**
*上下页,默认显示pageInfo_code指定的第一页数据
*/
@PostMapping(value = "/tolist/PageButton")
public JsonList getPageButton(
@RequestParam(defaultValue = "1",value = "pageNum")Integer pageNum,
@RequestParam(defaultValue = "6",value = "pageSize") Integer pageSize,
Integer pageInfo_code){
return listServiceImp.PageButton(pageNum,pageSize,pageInfo_code);
}
}
到此 针对多个页面的分页实例完成，其实就是多一个代表页面的状态吗参数，当然啦我这个是比较笨的方法，有好的方法还请赐教呢~
8116
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
