引入pagehelper插件
<!-- 分页插件 -->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
<version>1.2.3</version>
</dependency>
由于涉及到数据库查询但是这不是很重要所以我就将这部分带过了.使用mybatis
package com.bhg.controller;
import com.bhg.pojo.People;
import com.bhg.service.PeopleService;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import java.util.List;
/**
* @FileName: PeopleController
* @Author: bard
* @Date: 2019/7/15 9:14
*/
@Controller
public class PeopleController {
@Autowired
PeopleService peopleService;
/**
* 查询所有的person内容
* @return list列表页面
*/
@RequestMapping(value = "/user/peopleList")
public String findAllPeople(@RequestParam(defaultValue = "1") Integer startPage, @RequestParam(defaultValue = "12") Integer pageSize, Model model) {
/*
* startPage 第几页开始
* pageSize 查几条数据
* */
PageHelper.startPage(startPage, pageSize);
List<People> personList = peopleService.selectAll();
PageInfo<People> personPageInfo = new PageInfo<>(personList,5);
model.addAttribute("personPageInfo", personPageInfo);
model.addAttribute("personList", personList);
return "peopleList";
}
}
其实只要传递personPageInfo就可以了,我写的时候数据这样传了就没有做改动. PageInfo<People> personPageInfo = new PageInfo<>(personList,5)后面的参数就是设置导航栏的长度.基本引入这个工具类基本就很完善了,我给上我的页面吧
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>分页-People</title>
<link th:href="@{/css/pageHeper.css}" rel='stylesheet' type='text/css'/>
<script th:src="@{/js/jquery-1.9.1.js}"></script>
</head>
<body>
<div id="table01">
<table border="1">
<tr>
<th>ID</th>
<th>姓名</th>
<th>战斗力</th>
</tr>
<tr th:each="prod : ${personList}">
<td th:text="${prod.getId()}">Onions</td>
<td th:text="${prod.getName()}">Onions</td>
<td th:text="${prod.getAge()}">2.41</td>
</tr>
<tbody id="table"></tbody>
</table>
</div>
<p></p>
<!--分页导航栏 start-->
<ul>
<li>
<a th:href="@{/user/peopleList(startPage=${personPageInfo.getPageNum()}-1,pageSize=${personPageInfo.getPageSize()})}"
th:class="active"
th:if="${personPageInfo.isHasPreviousPage()}"><</a></li>
<li th:each="page_Num : ${personPageInfo.navigatepageNums}">
<a th:href="@{#}"
th:text="${page_Num}"
th:class="active_butt"
th:if="${page_Num == personPageInfo.pageNum }"></a>
<a th:href="@{/user/peopleList(startPage=${page_Num},pageSize=${personPageInfo.getPageSize()})}"
th:text="${page_Num}"
th:if="${page_Num != personPageInfo.pageNum }"></a>
</li>
<li><a th:href="@{/user/peopleList(startPage=${personPageInfo.nextPage},pageSize=${personPageInfo.getPageSize()})}"
th:if="${personPageInfo.isHasNextPage()}">></a></li>
</ul>
<!--分页导航栏 end -->
</body>
</html>
顺便给你导航栏的css
body {
text-align: center;
margin: 0;
padding: 0;
font-family: sans-serif;
background: url(../img/bg1.jpg) no-repeat 0px 0px;
}
#table01 {
margin: 0 auto;
width: 300px;
height: 100px
}
ul {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-71%, 50%);
display: flex;
margin: 0;
padding: 0;
}
ul li {
list-style-type: none;
}
ul li a {
position: relative;
display: block;
width: 40px;
height: 40px;
font-size: 20px;
text-align: center;
line-height: 40px;
background: #353535;
text-decoration: none;
margin: 5px;
border-radius: 4px;
-webkit-box-shadow: inset 0 5px 10px rgba(0, 0, 0, .1),
0 2px 10px rgba(0, 0, 0, .1);
}
ul li a:hover {
color: #fff;
text-shadow: 0 0 20px rgb(255, 224, 27),
0 0 20px rgb(255, 224, 27),
0 0 20px rgb(255, 224, 27),
0 0 20px rgb(255, 224, 27),
0 0 20px rgb(255, 224, 27),
0 0 20px rgb(255, 224, 27),
0 0 20px rgb(255, 224, 27),
0 0 20px rgb(255, 224, 27),
0 0 20px rgb(255, 224, 27);
}
.active_butt{
color: #1a16ff;
}
效果如下
只是完成基本功能,页面很丑见怪见怪!