Java分页 Element—UI

萌新小码农‍2025-09-10 21:02

前端代码

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>