后台实体层名为 Floor
Service层
接口类
FloorService
IPage<Floor> selectByPage(int currentPage, int pageSize);
实现接口类
FloorServiceImpl
@Autowired
private FloorMapper floorMapper;
@Override
public IPage<Floor> selectByPage(int currentPage, int pageSize) {
//查询对象
QueryWrapper<Floor> wrapper = new QueryWrapper<>();
//分页 第一个参数为,查询第几页,第二个参数为 每页多少条记录
Page<Floor> page = new Page<>(currentPage,pageSize);
//
IPage<Floor> floorIPage = floorMapper.selectPage(page,wrapper);
return floorIPage;
}
Mapper层
@Repository
@Mapper
public interface FloorMapper extends BaseMapper<Floor> {
}
Controller层
//floor分页显示
@RequestMapping("/api/getFloorPage")
public IPage<Floor> getPage(@RequestParam("currentPage")int currentPage, @RequestParam("pageSize") int pageSize){
return floorService.selectByPage(currentPage,pageSize);
}
Vue页面
template
<el-pagination
:current-page="currentPage"
:page-sizes="[10, 20, 40, 60]"
:page-size="pageSize"
layout=" total, sizes, prev, pager, next, jumper"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
Script
mounted() {
this.show()
},
methods: {
handleSizeChange(pageSize) {
this.loading = true
this.pageSize = pageSize
if (this.searchSelectValue.length !== 0) {
this.$options.methods.getTableData(this)
} else {
this.show()
}
},
handleCurrentChange(currentPage) {
this.loading = true
this.currentPage = currentPage
if (this.searchSelectValue.length !== 0) {
this.$options.methods.getTableData(this)
} else {
this.show()
}
},
show() {
axios({
method: 'post',
url: '/api/api/getFloorPage',
params: {
currentPage: this.currentPage,
pageSize: this.pageSize
}
}).then(res => {
if (res.status !== 200) {
return
}
if (res.data) {
this.tableData = res.data.records
this.total = res.data.total
this.loading = false
}
})
}
}
分页的数据赋值给tableData利用el-table循环遍历即可
前台实现分页功能
<el-table
ref="multipleTable"
:data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
style="width: 100%;height:600px;overflow:scroll;overflow-x:hidden;border:1px solid darkgrey"
>
<div class="block" style="margin-left:300px;">
<el-pagination
:current-page="currentPage"
:page-sizes="[11, 20, 40, 60]"
:page-size="pageSize"
layout=" total, sizes, prev, pager, next, jumper"
:total="tableData.length"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
data() {
return {
tableData: [],
currentPage: 1,
pageSize: 11,
total: '',
}
},
methods: {
handleSizeChange: function(size) {
this.pageSize = size
},
handleCurrentChange: function(currentPage) {
this.currentPage = currentPage
}
}
这里是前台分页实现的重点