LoginSignup
19
15

More than 5 years have passed since last update.

java play Framework pagination/pagerをつける方法

Last updated at Posted at 2016-01-19

play2.4.6にて
index(Item一覧)ページにpaginationをつけてみます :blue_book:

conf/routes

GET     /item/index                 controllers.ItemController.index(page: Integer = 1)
GET     /item/index/:page           controllers.ItemController.index(page: Integer)

pageを指定していなかった場合は1ページ目に
pageを指定していた場合はそのページへいくようにする。

app/controllers/ItemController.java

public Result index(int page) throws Exception{
        PagedList<Item> pagedList= ItemService.getPagedList(page);
        List<Item> items = pagedList.getList();
        int maxPage = pagedList.getTotalPageCount();

        return ok(views.html.item.index.render(items, page, maxPage));
    }

int pageは表示するページ。
PagedList pagedList= ItemService.getPagedList(page);
List items = pagedList.getList();にて
そのページに表示するItemのリストを取得。
getTotalPageCount()は最後のページが何ページかをだしてくれるので
それをint maxPageに入れる。

app/models/service/ItemService.java

public static final PagedList<Item> getPagedList(int page){
        Item item= new item();
        return item.getPagedList(page);
    }

item.getPagedListへ。

app/models/entity/Item.java

public PagedList<Item> getPagedList(int page) {

       int pageSize = 10;
        int pageIndex = page - 1;
        PagedList<Item> pegedList = Item.find.findPagedList(pageIndex, pageSize)
        return pegedList;
    }

int pageSizeは1ページに表示するItemの数。
int pageIndexは表示するページ。
findPagedList(pageIndex, pageSize)のpageIndexは0が1ページ目なので
-1したものを入れる。

これでpegedListにそのページに表示されるItemのリストが入る。

app/views/item/index.scala.html

@(items: List[models.entity.Item], currentPage: Int, maxPage: Int)
@main() {
    <div id="main">
    <ol class="breadcrumb">
        <li class="active">アイテム一覧</li>
    </ol>
        <div class="list-group">
            <p class="list-group-item list-group-item-info">
              アイテム
            </p>
            @for((item) <- items){
            <a href="/item/edit/@item.id" class="list-group-item">
            @item.name</br>
             </a>
            }
            @pagination(currentPage, maxPage)
        </div>
    </div>
}

viewの引数には
items(そのページに表示するitemのリスト)
currentPage(表示するページ)
maxPage(最後のページ)。

itemを表示したあと
@pagination(currentPage, maxPage)で
app/views/item/pagination.scala.htmlを呼び出す。

呼び出し方について詳しくはこちら :loudspeaker:

app/views/item/pagination.scala.html

@(currentPage: Integer, maxPage: Integer)

<div>
  <ul class="pagination">
        @if(currentPage == 1) {
            <li class="disabled"><span>&laquo;</span></li>
        } else {
            <li><a href="@controllers.routes.ItemController.index(currentPage - 1)">&laquo;</a></li>
        }

        @for(index <- 1 to maxPage) {
            @if(currentPage == index) {
                <li class="disabled"><span>@index</span></li>
            } else {
                <li><a href="@controllers.routes.ItemController.index(index)">@index</a></li>
            }
        }

        @if(currentPage == maxPage) {
            <li class="disabled"><span>&raquo;</span></li>
        } else {
            <li><a href="@controllers.routes.ItemController.index(currentPage + 1)">&raquo;</a></li>
        }
    </ul>
</div>

paginationの部分。
maxで1ページしかなければ<<は押せないようにする。
ページのぶんだけループして、現在のページ数のみ数字を押せないようにする。
現在のページがmax(最後のページ)であれば>>は押せないようにする。

以上 :yum:

19
15
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
19
15