Mybatis-Plus实现分页的前后端

Mybatis-Plus实现分类的前后端 一。后端 1.配置分页设置类，返回的是一个分页拦截器，才能使用分页功能

@Configuration @ConditionalOnClass(value = {PaginationInterceptor.class}) public class MybatisPlusIPageConfig { @Bean public PaginationInterceptor paginationInterceptor() { PaginationInterceptor paginationInterceptor = new PaginationInterceptor(); return paginationInterceptor; } }

2.分页代码

QueryWrapper queryWrapper = new QueryWrapper(); IPage<Question> iPage = new Page<>(3,5);//选出第三页，每页5个数据 iPage= questionMapper.selectPage(iPage,queryWrapper); System.out.println(""+iPage.getRecords());//获取当前页的数据 System.out.println("获取total"+iPage.getTotal());//获取总数 System.out.println("前十个"+iPage.getSize());//获取每页个数 System.out.println(iPage.getPages());//获取总页数 System.out.println(iPage.getCurrent());//获取每页的个数

二。前端

选用element-ui的el-pagination组件,前端获取的是全部数据，跟上面写的分页函数无关

<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="paginations.page_index" :page-sizes="paginations.page_sizes" :page-size="paginations.page_size" :layout="paginations.layout" :total="paginations.total"> </el-pagination>

data数据

data() { return { tableData: [], allTabledata: [], search: "", paginations: { page_index: 1, //当前页 total: 0, //总数 page_size: 5, //一页显示多少 page_sizes: [5, 10, 15, 20], //每页显示多少条 layout: "total, sizes, prev, pager, next, jumper", }, }; },

处理方法

getQuestionBank() { this.$http.get("url").then((res) => { this.allTableData = res.data.allData; console.log(this.allTableData); this.setPaginations(); }).catch((err) => { console.log(err)}); }, setPaginations() { this.paginations.total = this.allTableData.length; //数据的数量 this.paginations.page_index = 1; //默认显示第一页 this.paginations.page_size = 5; //每页显示多少数据 //显示数据 this.tableData = this.allTableData.filter((item, index) => { return index < this.paginations.page_size; }); }, handleSizeChange: function (page_size) { this.paginations.page_index = 1; //第一页 this.paginations.page_size = page_size; //每页先显示多少数据 this.tableData = this.allTableData.filter((item, index) => { return index < page_size; }); }, handleCurrentChange: function (page) { // 跳转页数 //获取当前页 let index = this.paginations.page_size * (page - 1); //获取总数 let allData = this.paginations.page_size * page; let tablist = []; for (let i = index; i < allData; i++) { if (this.allTableData[i]) { tablist.push(this.allTableData[i]); } this.tableData = tablist; }}, }, created() { this.getQuestionBank(); },