1.基础模块中创建分页工具类
public class PageList<T> {
//总条数
private Long total;
//分页数据
private List<T> rows;
public Long getTotal() {
return total;
}
public void setTotal(Long total) {
this.total = total;
}
public List<T> getRows() {
return rows;
}
public void setRows(List<T> rows)
{
this.rows = rows;
}
}
2.核心模块中创建查询类
public class BaseQuery {
//当前页
private Long page;
//每页显示得条数
private Long pageSize=10L;
//高级查询时传递得参数
private String keyword;
public String getKeyword() {
return keyword;
}
public void setKeyword(String keyword) {
this.keyword = keyword;
}
public Long getPage() {
return page;
}
public void setPage(Long page) {
this.page = page;
}
public Long getPageSize() {
return pageSize;
}
public void setPageSize(Long pageSize) {
this.pageSize = pageSize;
}
//计算得到的当前页有多少条数据 limit 0 ,10
public Long getStart(){
return (this.page-1)*this.pageSize;
}
}
3.核心模块mapper和service层写相应得查询方法和实现
mapper层
//查询总得条数
Long queryCount(BaseQuery baseQuery);
//查询总数据
List<T> queryData(BaseQuery baseQuery);
service层
//分页查询数据
PageList<T> queryPage(BaseQuery baseQuery);
impl
@Override
public PageList<T> queryPage(BaseQuery baseQuery) {
PageList pageList = new PageList();
//查询总条数
Long total = baseMapper.queryCount(baseQuery);
pageList.setTotal(total);
//查询总得分页数据
List<T> rows = baseMapper.queryData(baseQuery);
pageList.setRows(rows);
return pageList;
}
4.web模块功能得实现
//分页查询
@RequestMapping(value = "/page",method = RequestMethod.PATCH)
@ResponseBody
public PageList<Employee> page(@RequestBody EmployeeQuery employeeQuery){
//分页查询的方法
return employeeService.queryPage(employeeQuery);
}
5.前端代码得实现(elementui框架)
<!--工具条-->
<el-col :span="24" class="toolbar">
<!--<el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>-->
<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10" :total="total" style="float:right;">
</el-pagination>
</el-col>
handleCurrentChange(val) {
this.page = val;
this.getEmployees();
},
//获取用户列表
getEmployees() {
let para = {
page: this.page,
pageList: this.pageList,
//高级参数查询
keyword:this.filters.username
};
this.listLoading = true;
//NProgress.start();
//this.$http.patch("/employee/list").then(res => {
this .$http.patch("/employee/page",para).then(res=>{
//分页数据得封装
this.total=res.data.total;
this.employees = res.data.rows;
this.listLoading = false;
});
},