前端代碼

<div class="block"><span class="demonstration">頁數較少時的效果</span><el-paginationlayout="prev, pager, next":total="50"></el-pagination>
</div>

參考Element-UI

total:0,
form: {title: '',pageNo: 1,pageSize: 4
}

后端代碼示例

web層

@RequestMapping("/news")
public Result getNews(@RequestBody News news) {PageInfo<News> pageInfo = newsService.findNewsList(news);return new Result(200, "查詢成功", pageInfo);
}

Service層

PageHelper.startPage(news.getPageNo(), news.getPageSize());List<News> newsList = newsDao.findNewsList(news);
PageInfo<News> pageInfo = new PageInfo<>(newsList);
return pageInfo;

依賴

<dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper-spring-boot-starter</artifactId><version>1.4.5</version>
</dependency>