2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Spring Boot + Kotlin ページネーション

Posted at

#簡単なページネーションを行います。

  • 表示する量の制限

などができるようになります。

#前提(環境・完成図)

  • 基本的なWeb開発ができて、CRUDもできている人向け(GetMappingの説明などは省いています)

##完成図
スクリーンショット 2020-01-29 16.36.36.png

##環境

Version
Kotlin 1.3.60
spring Boot 2.2.2

#ページネーションを表示する

行う場所(ファイル)は、

  • Service
  • Controller
  • Repository

##1. Controller

import org.springframework.data.domain.Pageable

@GetMapping("/")
    fun index(model: Model, pageable: Pageable): String { // pageable: Pageableを追加

        val bookinfo = bookInfoservice.getfindAll(pageable) // bookInfoserviceから、getfindAll関数を呼び出す(引数は「pageable」にする)
        model.addAttribute("bookdata", bookinfo)

        return "Book/index"
    }
  1. import org.springframework.data.domain.Pageableを追加する

  2. index関数の引数に「pageable: Pageable」を追加する

  3. Serviceレイヤ(ここでは、bookInfoservice)から、getfindAll関数を呼び出している。

  4. 引数には、pageableを追加

そして・・・

##2. Service

import org.springframework.data.domain.Pageable
import org.springframework.data.domain.PageRequest

fun getfindAll(pageable: Pageable) = bookRepository.findAll(PageRequest.of(pageable.pageNumber, 5))
  1. getfindAll関数を呼び出す
  2. Repositoryレイヤ(bookRepository)から、findAll関数を呼び出す。
  3. 引数には、PageRequest.of(page, size)を入れる

※ PageRequest.of(何ページ目を表示するのか, どれだけ表示したいのか) -> 全て数値で入れる
※ pageable.pageNumberは、pageableリクエストに含まれる一つの値です。

Page request [number: 2,・・・・・] このようにレスポンスが返ってきます。

そして・・・・

##3. Repository

override fun findAll(pageable: Pageable): Page<クラス名>
  1. findAll関数は、標準で入っているため、override(オーバーライド)をして、関数を定義する。(新しい関数の場合は、overrideをする必要がない。)

  2. 返り値は、Page<クラス名>とすれば、OK!

※Page<クラス名>・・・クラス名は、Entity内のdataクラス名などを入れる。or dbを作る際に使うクラス名を使う

##4. 完了。 Thymeleaf側で、ページをめくれるようにする。


<div th:fragment='pagination'>
    <ul>
       <li th:class="${bookdata.first}" style="display:inline">
          <span th:if="${bookdata.first}">←先頭</span>
          <a th:if="${not bookdata.first}" th:href="@{${url}(page=0)}">←先頭</a>
       </li>
       <li th:each='i : ${#numbers.sequence(0, bookdata.totalPages-1)}' th:class="(${i}==${bookdata.number})? 'active' : ''" style="display:inline">
         <span th:if='${i}==${bookdata.number}' th:text='${i+1}'>1</span>
         <a th:href="@{${url}(page=${i})}">
            <span th:text='${i+1}'>1</span>
         </a>
       </li>
       <li th:class="${bookdata.last}" style="display:inline">
        <span th:if="${bookdata.last}">末尾➝</span>
        <a th:if="${not bookdata.last}" th:href="@{${url}(page=(${bookdata.totalPages}-1))}">末尾➝</a>
       </li>
   </ul>
</div>

※ ${bookdata}には現在のページの数字が入っています。 -> bookdata.numberで取り出すことが可能

終了!!

#まとめ

  • 基本的な(CRUDが入っている)実装があれば、コードを少し追加するだけで完成できるかもしれない。
  • PageableとPageの使い方でページネーションの実装は可能であること

#感想
今回のページネーションをSpring Bootで実装をするときは、Javaで行っている記事が多かったため、苦労しました。また、Kotlin + Spring Bootで実装しているものが少ない印象を持ったので、これから、少しずつアウトプットができればと思っております。

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?