Spring bootで値を保持したままページネーションを行いたい

【目標】
Spring boot を使用して、検索画面の値を保持しつつ、ページネーションを行いたいです。
因みに、検索結果をDBから取得して表示させる所までは実装できています。

【質問内容】
検索画面の値を保持しつつ、ページネーションを行うコーディングを行いたいのですが、
以下の点で行き詰っています。

　・検索結果画面の次のページ番号をクリックすると、次の検索結果が表示されない。
(Controllerに対してGetを送っているからだと思っている。。)

　尚、値の保持には hidden を使用する実装にしたいです。
気付いた点やアドバイスだけでも大丈夫です。
どなたか、ご教示の程よろしくお願いします。

【使用言語、ツール等】
・Spring boot
・java
・Thymeleaf
・jpa

【ソースコード】
■添付のソースコード
TestController (Controller)
BeginDisplay.html (初期表示の検索画面)
ResultDisplay.html (検索結果の表示画面)

・TestController (Controller)

java
1package com.example.demo.controller;
2
3import org.springframework.beans.factory.annotation.Autowired;
4import org.springframework.data.domain.Page;
5import org.springframework.data.domain.Pageable;
6import org.springframework.stereotype.Controller;
7import org.springframework.web.bind.annotation.GetMapping;
8import org.springframework.web.bind.annotation.PostMapping;
9import org.springframework.web.bind.annotation.RequestMapping;
10import org.springframework.web.bind.annotation.RequestParam;
11import org.springframework.web.servlet.ModelAndView;
12
13import com.example.demo.entity.TestEntity;
14import com.example.demo.service.TestService;
15
16@Controller
17@RequestMapping(value = "/lesson2")
18public class TestController {
19
20	private static final String VIEW = "ResultDisplay";
21
22
23
24	@GetMapping("/search")
25		public String startdisplay(){
26			return "BeginDisplay";
27		}
28
29		@Autowired
30		public TestService testservice;
31
32		@PostMapping("/search")
33		public ModelAndView search( ModelAndView mov,
34				@RequestParam(name="title",required = false) String title,
35				@RequestParam(name="titleKana",required = false) String titleKana,
36				//@ModelAttribute SearchForm form,
37				Pageable pageable
38				) {
39			//ModelAndView
40			//addObject(名前,保管するオブジェクト)
41			mov.setViewName(VIEW);
42		    mov.addObject("title",title);
43		    mov.addObject("titleKana",titleKana);
44			   Page<TestEntity> resultdata = testservice.searchmaterial(title,titleKana,pageable);
45			    mov.addObject("result",resultdata);
46			    mov.addObject("resultSize", resultdata.getSize());
47			    mov.addObject("page",resultdata);
48			    return mov;
49		}
50
51}
52

・BeginDisplay.html (初期表示の検索画面)

html
1<!DOCTYPE html>
2<html xmlns:th="http://www.thymeleaf.org">
3<head>
4<meta charset="UTF-8">
5<title>Material Search Data</title>
6</head>
7<body>
8  <form method="POST" action="">
9  <p>タイトル　：　<input type="text" id="title" name="title" th:value="${title}"></p>
10  <p>タイトルカナ　：　<input type="text" id="title_kana" name="titleKana" th:value="${titleKana}"></p>
11  <p><input type="submit"  name="id" value="検索"></p>
12  </form>
13
14
15
16    <div th:if="${resultSize > 0}"><label th:text="${resultSize}"></label>件</div>
17    <table border="1" th:if="${resultSize > 0}">
18   <tr>
19    <td>material_no</td>
20    <td>title</td>
21    <td>title_kana</td>
22    <td>reg_date</td>
23   </tr>
24
25   <tr th:each="data : ${result}">
26    <td th:text="${data.materialNo}"/>
27    <td th:text="${data.title}"/>
28    <td th:text="${data.titleKana}"/>
29    <td th:text="${data.regDate}"/>
30   </tr>
31  </table>
32</body>
33</html>

・ResultDisplay.html (検索結果の表示画面)

html
1<!DOCTYPE html>
2<html xmlns:th="http://www.thymeleaf.org"
3      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
4<head>
5<meta charset="UTF-8">
6<title>Material Search Data</title>
7</head>
8<body>
9  <form method="POST" action="">
10  <p>タイトル　：　<input type="text" id="title" name="title" th:value="${title}"></p>
11  <input type="hidden" name="title_serach" id="title_serach" th:value="${title}">
12  <p>タイトルカナ　：　<input type="text" id="title_kana" name="titleKana" th:value="${titleKana}"></p>
13  <input type="hidden" name="titleKana_serach" id="titleKana_serach" th:value="${titleKana}">
14  <p><input type="submit"  name="id" value="検索"></p>
15  </form>
16
17
18
19    <div th:if="${resultSize > 0}"><label th:text="${resultSize}"></label>件</div>
20    <table border="1" th:if="${resultSize > 0}">
21   <tr>
22    <td>material_no</td>
23    <td>title</td>
24    <td>title_kana</td>
25    <td>reg_date</td>
26   </tr>
27
28   <tr th:each="data : ${result}">
29    <td th:text="${data.materialNo}"/>
30    <td th:text="${data.title}"/>
31    <td th:text="${data.titleKana}"/>
32    <td th:text="${data.regDate}"/>
33   </tr>
34  </table>
35
36
37 <form th:name=f th:action="@{/pagenate}" th:object="${page}" method="post">
38    <div class="float-right">
39      <div>
40        <span th:text="${page.number+1}"></span>
41        <input type="hidden" name="number_serach" id="number_serach" th:value="${page.number+1}">
42    <span>/</span>
43    <span th:text="${page.totalPages}"></span>
44    <span>頁を表示</span>
45      </div>
46      <div th:fragment='paginationbar'>
47        <ul>
48          <li class="page-item">
49              <span th:if="${page.first}">←先頭</span>
50            <a th:if="${not page.first}" th:href="@{${url}(page=0)}">←先頭</a>
51          </li>
52          <li class="page-item" th:each='i : ${#numbers.sequence(0, page.totalPages-1)}'>
53            <span th:if='${i}==${page.number}' th:text='${i+1}'>1</span>
54            <a th:if='${i}!=${page.number}' th:href="@{${url}(page=${i})}">
55            <input type="hidden" name="i_serach" id="i_serach" th:value="${i}">
56                <span th:text='${i+1}'>1</span>
57            </a>
58          </li>
59          <li class="page-item">
60            <span th:if="${page.last}">末尾➝</span>
61            <a th:if="${not page.last}" th:href="@{${url}(page=(${page.totalPages}-1))}">末尾➝</a>           </li>
62        </ul>
63       </div>
64     </div>
65   </form>
66<a href="javascript:document.f.submit()">ダウンロード</a>
67</body>
68</html>

行動規範の内容に同意します

回答1件

ベストアンサー

org.springframework.data.domain.Pageable を利用したページング処理で利用するリクエストパラメータ名は、page と size 、ソートする場合は sort を利用します（デフォルト値は変更可能です）

そのため、

html
1<input type="hidden" name="i_serach" id="i_serach" th:value="${i}">

おそらくこのページ番号を指定している箇所の名前にて、i_search としているのですが、他のaタグ同様、pageにします。

余談ですがページング処理は検索処理ですし、ページング番号はURLに見えたとしても特に困ることはないのでHTTPメソッドはPOSTではなくGETで十分ですし、hiddenは利用しなくても良いでしょう。

投稿2020/08/15 06:17

A-pZ

総合スコア12011

engnao

2020/08/15 07:32

A-pZ さん回答ありがとうございます。ご指摘通り i_search の名前を他のaタグ同様、pageにしましたが、変化がありませんでした。以下に記述したソースコードを添付していますが、間違っている点はありますでしょうか? ```html <input type="hidden" name="${page.number}" id="${page.number}" th:value="${i}"> ``` また、GETで実装できれば良いのですが、都合上どうしてもPOSTで hidden を使用しないといけない状況です。

A-pZ

2020/08/15 16:50

name属性はpageにしなければなりません。

engnao

2020/08/18 07:21

A-pZ さん name属性はpageにしましたが、課題は解決しませんでした。また、 <a href="javascript:document.form1.submit()"></a> で囲うことでPOST通信の変更はできました。今度は、Controller側に hidden により値を受け渡すと、Value が空になり値を保持して受け渡しができない状況です。この事象について、アドバイスを頂きたいです。

A-pZ

2020/08/18 11:13

そのJavaScriptで送信されるformの内容を見る限り、ページング用のパラメータがpageではなく、number_serachやi_searchになっているようです。 form内のパラメータの整理をされた方が良いです。

engnao

2020/08/19 09:12 編集

A-pZ さん度々回答ありがとうございます。ご指摘通り以下の通り訂正しましたが、改善しませんでした。 <input type="hidden" name="page.number" th:value="${i}"> また、1点質問ですが、 hidden のパラメータにおいて、Value属性を変更することにより、受け渡す値が変更されるのは理解できるのですが、name属性をpageに変更する事により、どのように挙動が変わるのかかがわかりません。また、name属性をpageにするとは、具体的にどのような名前付けにしたら良いでしょうか? 長文になって申し訳ございません。回答を頂きたいです。よろしくお願いいたします。

A-pZ

2020/08/19 09:38

name属性は、pageにしなければなりません。具体的には、name = "page" です。 input type="hidden" name="page" でformを送信していますので、これがControllerへリクエストパラメータ名：page、valueに指定した値が送信されます。ただし、現在投稿されているHTMLテンプレートを見たところ、 <li class="page-item" th:each='i : ${#numbers.sequence(0, page.totalPages-1)}'> と、ページの数だけ繰り返し hidden が出力されているので、これはページングの番号の個数分、送信パラメータが作られてしまいます。一度、form内のパラメータを整理し、実際に出力されているHTMLのコードを見て、一体どれを送信しているのかをブラウザのデバッグモードなどで確認された方が賢明です。

行動規範の内容に同意します