laravelでpagination(ページ送り)の作り方。初心者もよく分かる図解。

更新日:

ここでは、Laravelでpagination、つまりページ送りを作る方法を解説していきます。

 

通常、コントローラーでデータベースから投稿一覧を取り出す場合、

最後に->get()と書きます。

 

クエリの最後には、基本的に

  • ->get()
  • ->first()

のどちらかを付けます。

get()は、検索の結果が複数ある場合は全部取得するという意味です。

first()は、検索の結果が複数あっても、最初に条件一致した1つだけを取得するという意味です。

入門!laravelでデータベースから取得。クエリの書き方(エロクワント版)より引用

 

ただ、この->get()で取り出した場合、
取り出した投稿一覧全部が1ページに表示されます。

取り出した投稿の数が少量なら問題ないですが、
100とか1000とかある場合、1ページに表示する数を制限して、
ページ送りを付けたいですよね。

 

ページ送りを付ける方法は簡単で、

このget()

paginate(3)

もしくは

simplePaginate(3)

のように変更します。(つづり注意:pagenateではなく、paginateです。)

この()内の数が1ページに表示する数です。3だったら、1ページに3件だけ表示されます。

 

ただ、ここで一回ブラウザでサイトを表示してみると・・

確かに3件に制限されるようになりましたが、肝心のページ送りが表示されません。

 

というわけで、ブレードを開きます。

投稿一覧を表示している@foreachの外側に、{{ $data->links() }} と書きます。

この$dataの部分は、@foreachの変換前の変数名(asより前の部分)と同じものにしてください。

この{{ $data->links() }}を入れた部分に、ページ送りが表示されます。

無事ページ送りが表示されたものの、レイアウトが縦になり、画面の端っこに・・

これでは酷いので、CSSでまともな見栄えに変えましょう。

 

ブラウザ上でこのページ送りを右クリックして、検証(要素を調査/Inspection)をクリックしてください。

すると、このページ送りは、リストで作られていて、class="pagination"が付いてる事が分かります。

なので、public\css\style.css を開いて(なければ作ってください)、以下を追記します。

コピーしました

コピー

/* ページ送りを中央寄せ */
.pagination {
    text-align: center;
}

/* ページ送りを横並びに */
.pagination li{
    display: inline-block;
}

そうする事で、まともな見栄えになりました。

 

paginate()を使う時はget()を消す!

ちょっと質問!Laravelでは、データベースへのクエリを書く時に、get()かfirst()を最後に付ける必要があるんだったよね?これ、get()を消しちゃってるけど、大丈夫なの?

大丈夫。というのも first()、つまり1件だけ取り出してブラウザ表示する場合はpaginate()は使わないじゃん?これはあくまで大量の投稿を取り出した時に、複数ページに分ける機能だから。

だから、paginate()が使われる = get()だってLaravel側は分かってるわけ。だからget()をpaginate()に置き換えて大丈夫なんだ。

Neby

 

逆にpaginate(3)->get(); のように書いた場合、エラーになります。

Symfony\Component\Debug\Exception\FatalThrowableError
Too few arguments to function Illuminate\Support\Collection::get(), 0 passed in D:\XAMPP\htdocs\newsite\vendor\laravel\framework\src\Illuminate\Support\Traits\ForwardsCalls.php on line 23 and at least 1 expected

なので、paginateを使う時は、必ずget()を消す必要があります。

 

paginate()とsimplePaginate()の違いは?

paginate(3)は、<123> のように数が表されるのに対して、

simplePaginate(3) は前のページ、次のページのような表示になります。

好きな方を使うと良いです。

 

表示するページ送りの数を変更する

画像のように、ページ送り内のページ数表示を変更する事ができます。

{{ $data->links() }}

{{ $data->onEachSide(2)->links() }}

のように書き換えます。onEachSideの()内の数を増やすと表示数が増えます。減らすと表示数が減ります。例えば、2だと、真ん中の数字を基準にして、その横に2つづつ置くという設定になってます。

 

検索機能で呼び出したpaginationが表示されない!?

画像のように、サイトに検索窓があり、サイト内検索ができるようになってるとします。

しかし、サイト内検索後のページ送りをクリックしても、正しく2ページ目以降が表示されなかったりします。

これは、ブレード側をイジる事で直せます。

画像のように、例えば、検索した時の?と=の間のクエリ文字列がkeywordなら、

{{ $data->links() }}

{{ $data->appends(Request::only('keyword'))->links() }}

のように、書き換えると、ちゃんと動くようになります。

 

写真で血圧記録

  • この記事を書いた人

Neby

本を毎日多読しつつ、資産運用、プログラミング、心理学、ネットビジネススキルを猛向上中。貧富の差が広がる5年後、10年後に安心生活を送るためのお金のリテラシー、スキル、資産を一緒に作っていきましょう。

-PHP Laravel入門