前端代码
html
<div class="block">
<span class="demonstration">页数较少时的效果</span>
<el-pagination
layout="prev, pager, next"
:total="50">
</el-pagination>
</div>
参考Element-UI
js
total:0,
form: {
title: '',
pageNo: 1,
pageSize: 4
}
后端代码示例
web层
java
@RequestMapping("/news")
public Result getNews(@RequestBody News news) {
PageInfo<News> pageInfo = newsService.findNewsList(news);
return new Result(200, "查询成功", pageInfo);
}
Service层
java
PageHelper.startPage(news.getPageNo(), news.getPageSize());List<News> newsList = newsDao.findNewsList(news);
PageInfo<News> pageInfo = new PageInfo<>(newsList);
return pageInfo;
依赖
xml
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
<version>1.4.5</version>
</dependency>