分页器Pagerhelper
其中的属性
//当前页
private int pageNum;
//每页的数量
private int pageSize;
//当前页的数量
private int size;
//由于startRow和endRow不常用,这里说个具体的用法
//可以在页面中"显示startRow到endRow 共size条数据"
//当前页面第一个元素在数据库中的行号
private int startRow;
//当前页面最后一个元素在数据库中的行号
private int endRow;
//总记录数
private long total;
//总页数
private int pages;
//结果集
private List<T> list;
//前一页
private int prePage;
//下一页
private int nextPage;
//是否为第一页
private boolean isFirstPage;
//是否为最后一页
private boolean isLastPage;
//是否有前一页
private boolean hasPreviousPage;
//是否有下一页
private boolean hasNextPage;
//导航页码数
private int navigatePages;
//所有导航页号
private int[] navigatepageNums;
//导航条上的第一页
private int navigateFirstPage;
//导航条上的最后一页
private int navigateLastPage;
public PageInfo() {
this.isFirstPage = false;
this.isLastPage = false;
this.hasPreviousPage = false;
this.hasNextPage = false;
}
mapper
@Mapper
public interface UserMapper {
@Select("select user_name as userName,password,status from user")
List<UserBean> getList(RowBounds rowBounds);
@Select("select count(id) from user")
Integer getCount();
}
service
interface
public interface UserService {
// Page getList(Integer page, Integer recPerPage);
PageInfo getList(Integer page, Integer recPerPage);
}
impl
// @Override
// public Page getList(Integer page, Integer recPerPage) {
// Page resultPage = new Page();
// resultPage.setResult("success");
// if(page<=0)page=1;
// Integer offset = (page-1)*recPerPage;
// RowBounds rowBounds = new RowBounds(offset,recPerPage);
// List<UserBean> userList = userMapper.getList(rowBounds);
// resultPage.setData(userList);
// Pager pager = new Pager();
// pager.setPage(page);
// pager.setPage(recPerPage);
// pager.setRecTotal(userMapper.getCount());
// resultPage.setPager(pager);
// return resultPage;
// }
@Override
public PageInfo getList(Integer page, Integer recPerPage) {
if(page<=0)page=1;
Integer offset = (page-1)*recPerPage;
RowBounds rowBounds = new RowBounds(offset,recPerPage);
// PageHelper.startPage(offset,recPerPage);
List<UserBean> userList = userMapper.getList(rowBounds);
PageInfo pageInfo = new PageInfo(userList);
//总页数
if(userMapper.getCount() / recPerPage == 0)
pageInfo.setPages(userMapper.getCount() / recPerPage);
else pageInfo.setPages(userMapper.getCount() / recPerPage +1);
//当前页
pageInfo.setPageNum(page);
//总数
pageInfo.setTotal(userMapper.getCount());
//下一页
pageInfo.setNextPage(page +1);
//上一页
if(page >1 )
pageInfo.setPrePage(page -1);
else pageInfo.setPrePage(1);
// 最后和第一页 NavigatePages:所有的导航页 默认显示八个,导航最多八个
pageInfo.setNavigateFirstPage(1);
pageInfo.setNavigateLastPage(pageInfo.getPages());
return pageInfo;
}
controller
@RequestMapping("/user_list")
public String getUserList(Integer page,Integer recPerPage){
// ApplicationContext context =new ClassPathXmlApplicationContext("spring-mybatis.xml");
// UserService userService = (UserService) context.getBean("userServiceImpl");
//Integer page = Integer.parseInt(req.getParameter("page")) ;
//Integer recPerPage = Integer.parseInt(req.getParameter("recPerPage"));
PageInfo page1 = userService.getList(page,recPerPage);
//System.out.println(page1);
// String result = JSONObject.toJSONString(page1);
return result;
}
前端页面
createApp({
data() {
return {
message: 'Hello Vue!',
username: "",
password: "",
index: "",
length: '',
pageInfo: {
total: "",
startRow: 0,
size: "",
prePage: "",
pages: "",
pageSize: "",
pageNum: "",
nextPage: "",
navigatepageNums: "",
navigatePages: "",
navigateLastPage: "",
navigateFirstPage: "",
isLastPage: "",
isFirstPage:"",
hasPreviousPage:"",
hasNextPage:""
},
list: {
userName:"",
password:"",
status:""
},
cols: [
"用户名","密码","状态"
],
array: ""
}
},
methods: {
//请求数据
getlist(page, recperpage){
console.log(page)
axios.get("/IdeaProject_1_0_SNAPSHOT_war/user_list",{
params:{
page: page,
recPerPage:recperpage
}
}).then(response => {
console.log(response.data)
this.array = response.data.list;
this.pageInfo.total = response.data.total;
this.pageInfo.pageNum = response.data.pageNum;
this.pageInfo.prePage = response.data.prePage;
this.pageInfo.nextPage = response.data.nextPage;
}).catch(err =>{
console.log(err)
})
},
next(){
this.getlist(this.pageInfo.nextPage, this.pageInfo.size)
},
pre(){
this.getlist(this.pageInfo.prePage, this.pageInfo.size)
},
goto(i){
this.getlist(i, this.pageInfo.size)
},
mounted() {
axios.get("/IdeaProject_1_0_SNAPSHOT_war/user_list",{
params:{
page: 1,
recPerPage:4
}
}).then(response => {
console.log(response.data)
this.array = response.data.list;
this.length = response.data.list.length;
this.pageInfo.total = response.data.total;
this.pageInfo.pageNum = response.data.pageNum;
this.pageInfo.prePage = response.data.prePage;
this.pageInfo.nextPage = response.data.nextPage;
this.pageInfo.pageSize = response.data.pageSize;
this.pageInfo.size = response.data.size;
this.pageInfo.navigateFirstPage = response.data.navigateFirstPage;
this.pageInfo.navigateLastPage = response.data.navigateLastPage;
console.log(this.pageInfo)
}).catch(err =>{
console.log(err)
})
}
}).mount('#app')
主页面
<div class="panel-body panel-info">
<!-- <div id="mydatagrid" class="datagrid datagrid-striped"> -->
<table class="table">
<thead>
<tr>
<th v-for="(item, index) in cols">
{{item}}
</th>
<th>
操作
</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in array" v-bind:key="item.id">
<td>{{item.userName}}</td>
<td>{{item.password}}</td>
<td>{{item.status}}</td>
<td>
<button class='btn btn-sm btn-info modify' @click="get(index)">修改</button> <button
class='btn btn-sm btn-danger delete' @click="del(index)">删除</button>
<button class='btn btn-sm btn-info detail' @click="detail(index)">查看详情</button>
</td>
</tr>
</tbody>
</table>
<ul class="pager" >
<li class="previous">
<button href="your/nice/url" @click="pre()">«</button>
</li>
<li v-for="i in pageInfo.navigateLastPage">
<button href="your/nice/url" @click="goto(i)">{{i}}</button>
</li>
<li class="next">
<button href="" @click="next()">»</button>
</li>
</ul>
<!-- </div> -->
</div>
</div>