Probleme de pagination avec spring thymeleaf

**wangi** · 12/11/2017, 21h19

Bonjour,

Je suis débutant avec thymeleaf et je m'exerce en réalisant une simple application mais j'ai un probleme pour ce qui concerne la pagination avec le bouton suivant, bouton précédent.

voici le code du controleur

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
 
package com.example.demo.web;
 
import java.util.Optional;
 
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
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 com.example.demo.dao.PersonServiceImpl;
import com.example.demo.entites.Pager;
import com.example.demo.entites.Person;
 
 
@Controller
@RequestMapping(value="/Person")
public class PersonController {
	@Autowired
	private PersonServiceImpl personServiceImpl;
	private static final int BUTTONS_TO_SHOW = 5;
	private static final int INITIAL_PAGE = 0;
	private static final int INITIAL_PAGE_SIZE = 5;
	private static final int[] PAGE_SIZES = { 5, 10, 20 };
 
 
	@RequestMapping(value="/test")
	public String showPersonsPage(Model model,@RequestParam("pageSize") Optional<Integer> pageSize,
			@RequestParam("page") Optional<Integer> page) {
 
		int evalPageSize = pageSize.orElse(INITIAL_PAGE_SIZE);
		int evalPage = (page.orElse(0) < 1) ? INITIAL_PAGE : page.get() - 1;
 
		Page<Person> persons = personServiceImpl.findAll(new PageRequest(evalPage, evalPageSize));
		Pager pager = new Pager(persons.getTotalPages(), persons.getNumber(), BUTTONS_TO_SHOW);
 
		model.addAttribute("persons", persons);
		model.addAttribute("selectedPageSize", evalPageSize);
		model.addAttribute("pageSizes", PAGE_SIZES);
		model.addAttribute("pager", pager);
 
		return "persons";
	}
 
}

le code de la page html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
 
<link rel="stylesheet" type="text/css" href="../static/css/bootstrap.min.css"
   th:href="@{/css/bootstrap.min.css}"/>
   <link rel="stylesheet" type="text/css" href="../static/css/mystyle.css"
   th:href="@{/css/mystyle.css}"/>
 
<title>Persons</title>
</head>
<body>
	<div class="container spacer">
		<div class="row">
			<h1>Persons</h1>
		</div>
		<div class="row">
			<table class="table table-striped">
				<tr>
					<th>First name</th>
					<th>Last name</th>
					<th>Age</th>
				</tr>
				<tr th:each="person : ${persons}">
					<td th:text="${person.firstName}"></td>
					<td th:text="${person.lastName}"></td>
					<td th:text="${person.age}"></td>
				</tr>
 
 
			</table>
		</div>
 
		<div class="row">
			<div class="form-group col-md-1">
				<select class="form-control pagination" id="pageSizeSelect">
					<option th:each="pageSize : ${pageSizes}" th:text="${pageSize}" th:value="${pageSize}" th:selected="${pageSize} == ${selectedPageSize}"></option>
				</select>
			</div>
 
			<div th:if="${persons.totalPages != 1}" class="form-group col-md-11 pagination-centered">
				<ul class="pagination">
					<li th:class="${persons.number == 0} ? disabled">
						<a class="pageLink" th:href="@{/(pageSize=${selectedPageSize}, page=1)}">&laquo;</a>
					</li>
 
 
				   <li th:class="${persons.number == 0} ? disabled">
						<a class="pageLink" th:href="@{/(pageSize=${selectedPageSize}, page=${persons.number})}">&larr;</a>
					</li>
					<li th:class="${persons.number == (page - 1)} ? 'active pointer-disabled'"
						th:each="page : ${#numbers.sequence(pager.startPage, pager.endPage)}">
						<a class="pageLink" th:href="@{/(pageSize=${selectedPageSize}, page=${page})}" th:text="${page}"></a>
					</li>
					<li th:class="${persons.number + 1 == persons.totalPages} ? disabled">
						<a class="pageLink" th:href="@{/(pageSize=${selectedPageSize}, page=${persons.number + 2})}">&rarr;</a>
					</li>
 
 
 
					<li th:class="${persons.number + 1 == persons.totalPages} ? disabled">
						<a class="pageLink" th:href="@{/(pageSize=${selectedPageSize}, page=${persons.totalPages})}">&raquo;</a>
					</li>
 
				</ul>
			</div><!-- fin total page-->
		</div><!-- fin div row -->
	</div><!-- fin container -->
</body>
</html>

La classe Pager

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
 
package com.example.demo.entites;
 
public class Pager {
 
	private int buttonsToShow = 5;
 
	private int startPage;
 
	private int endPage;
 
	public Pager(int totalPages, int currentPage, int buttonsToShow) {
 
		setButtonsToShow(buttonsToShow);
 
		int halfPagesToShow = getButtonsToShow() / 2;
 
		if (totalPages <= getButtonsToShow()) {
			setStartPage(1);
			setEndPage(totalPages);
 
		} else if (currentPage - halfPagesToShow <= 0) {
			setStartPage(1);
			setEndPage(getButtonsToShow());
 
		} else if (currentPage + halfPagesToShow == totalPages) {
			setStartPage(currentPage - halfPagesToShow);
			setEndPage(totalPages);
 
		} else if (currentPage + halfPagesToShow > totalPages) {
			setStartPage(totalPages - getButtonsToShow() + 1);
			setEndPage(totalPages);
 
		} else {
			setStartPage(currentPage - halfPagesToShow);
			setEndPage(currentPage + halfPagesToShow);
		}
 
	}
 
	public int getButtonsToShow() {
		return buttonsToShow;
	}
 
	public void setButtonsToShow(int buttonsToShow) {
		if (buttonsToShow % 2 != 0) {
			this.buttonsToShow = buttonsToShow;
		} else {
			throw new IllegalArgumentException("Must be an odd value!");
		}
	}
 
	public int getStartPage() {
		return startPage;
	}
 
	public void setStartPage(int startPage) {
		this.startPage = startPage;
	}
 
	public int getEndPage() {
		return endPage;
	}
 
	public void setEndPage(int endPage) {
		this.endPage = endPage;
	}
 
	@Override
	public String toString() {
		return "Pager [startPage=" + startPage + ", endPage=" + endPage + "]";
	}
 
}

L'entité Person

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
 
package com.example.demo.entites;
 
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
 
@Entity
public class Person {
 
	@Id
	@GeneratedValue(strategy = GenerationType.AUTO)
	private long personId;
 
	private String firstName;
 
	private String lastName;
 
	private int age;
 
	public Person() {
	}
 
	public Person(String firstName, String lastName, int age) {
		this.firstName = firstName;
		this.lastName = lastName;
		this.age = age;
	}
 
	public long getPersonId() {
		return personId;
	}
 
	public void setPersonId(long studentId) {
		this.personId = studentId;
	}
 
	public String getFirstName() {
		return firstName;
	}
 
	public void setFirstName(String firstName) {
		this.firstName = firstName;
	}
 
	public String getLastName() {
		return lastName;
	}
 
	public void setLastName(String lastName) {
		this.lastName = lastName;
	}
 
	public int getAge() {
		return age;
	}
 
	public void setAge(int age) {
		this.age = age;
	}
 
	@Override
	public String toString() {
		return "Person [personId=" + personId + ", firstName=" + firstName + ", lastName=" + lastName + ", age=" + age + "]";
	}
 
}

L'implémentation

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
package com.example.demo.dao;
 
import org.springframework.data.domain.Page;
import org.springframework.data.domain.Pageable;
import org.springframework.data.jpa.repository.JpaRepository;
 
import com.example.demo.entites.Person;
 
public interface PersonServiceImpl  
	extends JpaRepository<Person, String>{
 
	public Page <Person>findByfirstName(String firstName,Pageable peable);
 
}