elementui pagination插件

当然这里的依赖部分就需要去创库ctrl+v了

  <!--分页部分 pagination插件 @current-change="handlepagechange"当页面更改时候--><el-paginationclass="pagination"backgroundlayout="prev, pager, next,jumper,total"@current-change="handlepagechange"<!--这个方法是当切换布局控制的页号时候能够改变参数-->:total="pagination.total":page-size="pagination.pageSize":current-page="pagination.currentpage"><!--分别是前一页，当前页面,下一个,跳转布局 总数 页面大小 当前也--></el-pagination>

这种是无法选择页面大小的分页

该前端的请求处理以及切换页号的方法

<!--在created页面渲染完成时候加载这个方法 赋值给要展现数据的空数组-->getpage(){let this1=this;/*** 组织参数然后传递url*/axios.get("http://localhost:8070/facebook-data/"+this1.pagination.currentpage+'/'+this1.pagination.pageSize).then((res)=> {console.log(res.data);this1.pagination.pageSize=res.data.size;this1.pagination.total=res.data.total;//记录总数 前端loyout中展示this1.pagination.currentpage=res.data.current;//重新经行赋值this1.tableData=res.data.records;//把后端返回的记录给数组})},/*** 当页面数值修改 当前页面的数值也该修改* @param currentPage*/handlepagechange(currentPage){this.pagination.currentpage=currentPage;//传入参数变成当前页面 在调取查询操作this.getpage();},/*** 大部分调用的crud方法·都是本身mubaties框架封装和好的 所以参数名应该根据返回值决定*/data() {return {tableData: [{keyWords:'',content: '',status:'',readCount:'',shareCount:'',chineseContent:'',topSort:'',catchTime:''}],/*插件初始化参数 我这里是默认初始1页 10行*/pagination:{currentpage:1,pageSize:10,total:0,}}}

如果是功能完全的分页

应该还会多一个改变页面大小的方法

 <el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentpage":page-sizes="[30, 50, 100, 200]"<!--可选择页面大小-->:page-size="pageSize"layout="total, sizes, prev, pager, next, jumper":total="400"></el-pagination>

对应方法

  methods: {initial(){//页面加载初始化let this1=this;/*** 组织参数然后传递url*/axios.get("http://localhost:8070/recruitmentAticle+this1.pagination.currentpage+'/'+this1.pagination.pageSize).then((res)=> {console.log("输出总数"+res.data.data.total);// this1.pagination.pageSize=res.data.size;// this1.pagination.total=res.data.total;// this1.pagination.currentpage=res.data.current;// this1.tableData=res.data.records;})},handleSizeChange(pageSize) { <!--这里的参数是和选择大小组件绑定到-->console.log("页面大小改变"+pageSize)this.pageSize = pageSizeconsole.log(this.pageSize)this.initial()},handleCurrentChange(pageNum) {console.log("当前页面改变"+pageNum)this.currentpage = pageNumconsole.log(this.currentpage)this.initial()}}

``

`后端 (Mybatis plus)

首先先进行注册拦截器

/*** 解决跨域问题  MybatiesPlus分页拦截器* 很多插件和过滤器拦截器在spring中是通过xml配置形成注册* springboot省去了这一繁琐流程所以需要在Configuration* 配置类中注册* 分页面拦截器*/@Configuration
public class MyConfiguration {@Beanpublic MybatisPlusInterceptor mybatisPlusInterceptor(){/*** 上述代码第一行是创建MyBatisPlus的拦截器栈，这个时候拦截器栈中没有具体的拦截器* 第二行是初始化了分页拦截器，并添加到拦截器栈中。* 如果后期开发其他功能，需要添加全新的拦截器，按照第二行的格式继续add进去新的拦截器就可以了。* **总结*** 1. 使用IPage封装分页数据* 2. 分页操作依赖MyBatisPlus分页拦截器实现功能* 3. 借助MyBatisPlus日志查阅执行SQL语句*/MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();interceptor.addInnerInterceptor(new PaginationInnerInterceptor());return interceptor;}}

然后Controller层的使用

@Autowired
private FacebookDataService  facebookDataService;
@GetMapping("/{currentpage}/{pageSize}")
@CrossOrigin(origins = "*")
public IPage getallorpage(@PathVariable("currentpage") Integer currentpage, @PathVariable("pageSize") Integer pageSzie){IPage page = new Page(currentpage,pageSzie);IPage iPage = facebookDataService.page(page, null);/*** 如果当前页面值大于了总页码数值 从新操作,使用最大页码数值作为当前页码*/if (currentpage >iPage.getPages()){page = new Page(iPage.getPages(),pageSzie);}return iPage;
}

可以看到这里我传输了俩个参数一个是当前页号一个是页面大小，而在
在sql语句中分页是由limit X,Y完成
y表示页面大小
x代表当前页面第一个数据的索引 x=（当前页号-1）乘*y;由于Mybatis 的基础mapper中封装好了 ,所以这里传输当前页号，页面大小即可
结果以及日志如下
(这里只有一个参数因为传入的当前页号为1故省去了(1-1)**任何数为0 故省略)

其中用到的 Mapper ,service,serviceimpl使用封装好的即可
service层接口以及实现类型

public interface FacebookDataService extends IService<FacebookData> {public IPage<FacebookData> getPage(Integer currentpage, Integer pageSize, FacebookData facebookData);
}

这里的lambda表达式处理是我用来做筛选条件的，IService的实现方法本质是调用了basemapper的selectpage方法

@Service
//这里的page我重写时因为有时候需要条件构造器构造条件
public class FacebookDataServiceImpl extends ServiceImpl<FacebookDataMapper, FacebookData> implements FacebookDataService {@Autowiredprivate FacebookDataMapper facebookDataMapper;@Overridepublic IPage<FacebookData> getPage(Integer currentpage, Integer pageSize, FacebookData facebookData){IPage page = new Page(currentpage,pageSize);QueryWrapper<FacebookData> lqw = new QueryWrapper<FacebookData>();lqw.like("KeyWords",facebookData.getKeyWords()).like("ChineseContent",facebookData.getChineseContent()).like("Status",facebookData.getStatus()).like("CatchTime",facebookData.getCatchTime());
//        LambdaQueryWrapper<FacebookData> lqw = new LambdaQueryWrapper<FacebookData>();
//
//        lqw.like(Strings.isNotEmpty(facebookData.getKeyWords()),FacebookData::getKeyWords,facebookData.getKeyWords());
//        lqw.like(Strings.isNotEmpty(facebookData.getChineseContent()),FacebookData::getChineseContent,facebookData.getChineseContent());
//        lqw.like(Strings.isNotEmpty(facebookData.getCatchTime().toString()),FacebookData::getCatchTime,facebookData.getCatchTime());
//        lqw.like(Strings.isNotEmpty(facebookData.getStatus().toString()),FacebookData::getStatus,facebookData.getStatus());facebookDataMapper.selectPage(page, lqw);return facebookDataMapper.selectPage(page, lqw); //实际数据层处理方法 service处理逻辑 然后由数据层mapper对数据修改}}

无赛选条件时分页就简单许多,毕竟都是框架封装好的

  @Overridepublic Result queryList(Integer currentPage,Integer pageSize) {IPage<TRecruitmentAticle> page = query().page(new Page<>(currentPage.longValue(),pageSize.longValue()));return Result.ok(page);}

basemapper的selectpage是mybatisplus封装好的

@Mapper
public interface FacebookDataMapper extends BaseMapper<FacebookData> {}

然后我们来看看selectpage的参数以及返回值

所以我们在调用分页的时候需要创建page对象,以及条件构造器Wrapper(可以为null)
返回值也为page对象

前端接受返回值(很容易搞混)

axios返回的数据结构是

一个相应体 ,除了有我们发给前端的数据以外还有很多请求信息,我们发送的数据res.data里面封装起来的,但是一般为了和前端统一不能直接返回数据,而是封装统一返回体,数据在返回体里的

/*** 定义返回·结果类*/
@Data
@NoArgsConstructor
@AllArgsConstructor
public class Result {private Boolean success;private String errorMsg;private Object houduandata;private Long total;public static Result ok(){return new Result(true, null, null, null);}public static Result ok(Object data){return new Result(true, null, data, null);}public static Result ok(List<?> data, Long total){return new Result(true, null, data, total);}public static Result fail(String errorMsg){return new Result(false, errorMsg, null, null);}
}

所以这时候的数据取出是
res.data.houduandata

element ui +mybatisPlus分页插件实现分页功能相关推荐

jquery php 分页插件,jQuery 分页插件代码
jQuery 分页插件代码 js代码 var newlist = new Vue({ el: '#app', data: { current_page: 1, //当前页 pages: 50, //总 ...
使用PageHelper分页插件手动分页，其他查询数据出现串连问题
在一个需求中,需要在代码中进行分页,于是就选用了PageHelper分页插件进行分页,刚开始的时候忘记了PageHelper分页插件的用法于是我就用: // 设置分页查询条件 PageHelper.s ...
spring boot+mybatis+thymeleaf+pagehelper分页插件实现分页功能
文章目录前言正文业务场景后端 pom.xml application.yml 实体类video.java和User.java----映射VideoMapper.xml----VideoMapp ...
Mybatis采用分页插件实现分页
前言小编我将用CSDN记录软件开发求学之路上亲身所得与所学的心得与知识,有兴趣的小伙伴可以关注一下! 也许一个人独行,可以走的很快,但是一群人结伴而行,才能走的更远!让我们在成长的道路上互相学习,让 ...
java ajax jquery分页插件_JQueryPagination分页插件,ajax从struts请求数据
2017-07-16 学完了struts2,做了个关于分页的小例子,用到了JQuery分页插件Pagination,先贴下插件下载地址插件作者对于参数讲解的不够详细,琢磨了半天才明白怎么用,不多说, ...
全注解怎么使用分页插件_分页插件使用的方式
分页插件使用的方式修改 pom 文件,添加分页 jar 包依赖修改 mybatis.xml 文件 UserDao 接口,UserMapper.xml 添加对应方法与实现 sql 对应 UserSe ...
mybatis分页插件_MyBatis 分页插件 5.2.0 发布
时隔整整8个月,分页插件这次带来了一次大的更新. 5.2.0 - 2020-07-26 •jsqlparser升级到3.2版本,sql解析更好,对sqlserver支持更好.•修改 sqlserver ...
[置顶]mybatis分页插件实现分页...
1.了解过程:在数据库服务器中,sql语句实现分页便要每个查询语句都要写上limit(开始,结束),并且不能灵活的随前端变化,为此使用拦截器的方法,过程:拦截器拦截请求的sql语句(根据需要拦截的ID ...
使用element ui 的日期插件搜索清空时报错
1.先贴上一张图,供您看一看 Error in v-on handler: "TypeError: Cannot read property '0' of null" 我这报错报了 ...

element ui +mybatisPlus分页插件实现分页功能

elementui pagination插件

``

`后端 (Mybatis plus)

前端接受返回值(很容易搞混)

element ui +mybatisPlus分页插件实现分页功能相关推荐

最新文章

热门文章