Laravelでページネーションを実装してみる

2016.10.02

Laravelでデータベースから取得したデータを、ページネーションを使って表示してみます。

準備

データベースからデータを取得して、一覧を表示させてみます。
テーブルは以下のような内容になっています。

try-to-implement-pagination-in-laravel01

app\Autumn2016.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Animation extends Model
{
    protected $fillable = ['title', 'category', 'production', 'actor'];
}

app\Http\routes.php

Route::get('/list', 'AnimationController@getIndex');

app\Http\Controllers\AnimationController.php

<?php
 
namespace App\Http\Controllers;
 
use App\Autumn2016;
 
class AnimationController extends Controller
{
    public function getIndex()
    {
        $data = Autumn2016::get();
        return view('list.index', compact('data'));
    }
}

resources\views\list\index.blade.php

@foreach($data as $item)
<div>
    <div>{{{ $item->id }}}</div>
    <div>{{{ $item->title }}}</div>
    <div>{{{ $item->category }}}</div>
    <div>{{{ $item->production }}}</div>
    <div>{{{ $item->actor }}}</div>
</div>
<hr>
@endforeach

データベースから取得したデータがすべて表示されました。

try-to-implement-pagination-in-laravel02

ページネーションの設定

先ほどのすべて表示したコードを修正して、ページネーションを設定してみます。

app\Http\Controllers\AnimationController.php

ページネーションを設定する場合、paginate()を使います。

<?php
 
namespace App\Http\Controllers;
 
use App\Autumn2016;
 
class AnimationController extends Controller
{
    public function getIndex()
    {
        $data = Autumn2016::paginate(3);
        return view('list.index', compact('data'));
    }
}

今回は1ページに表示される件数を3件にしました。

resources\views\list\index.blade.php

ページネーションを表示する場合、links()を使います。

@foreach($data as $item)
<div>
    <div>{{{ $item->id }}}</div>
    <div>{{{ $item->title }}}</div>
    <div>{{{ $item->category }}}</div>
    <div>{{{ $item->production }}}</div>
    <div>{{{ $item->actor }}}</div>
</div>
<hr>
@endforeach
{{ $data->links() }}

3件のみ表示され、下部にページネーションが表示されました。

try-to-implement-pagination-in-laravel03

ページネーション部分のコードは以下のようになっています。

<ul class="pagination"><li class="disabled"><span>&laquo;</span></li> <li class="active"><span>1</span></li><li><a href="http://localhost:8000/list?page=2">2</a></li><li><a href="http://localhost:8000/list?page=3">3</a></li><li><a href="http://localhost:8000/list?page=4">4</a></li><li><a href="http://localhost:8000/list?page=5">5</a></li> <li><a href="http://localhost:8000/list?page=2" rel="next">&raquo;</a></li></ul>

ページネーションを前後移動のみにしてみます。

app\Http\Controllers\AnimationController.php

前後移動のみの場合、simplePaginate()を使います。

<?php
 
namespace App\Http\Controllers;
 
use App\Autumn2016;
 
class AnimationController extends Controller
{
    public function getIndex()
    {
        $data = Autumn2016::simplePaginate(3);
        return view('list.index', compact('data'));
    }
}

下部のページネーションが前後移動のみになりました。

try-to-implement-pagination-in-laravel04

ページネーションのコードは以下のようになっています。

<ul class="pager"><li class="disabled"><span>&laquo;</span></li> <li><a href="http://localhost:8000/list?page=2" rel="next">&raquo;</a></li></ul>

ページネーションのURLを変更する

ページネーションのURLに別のパラメータを追加してみます。

resources\views\list\index.blade.php

appends()を使います。

@foreach($data as $item)
<div>
    <div>{{{ $item->id }}}</div>
    <div>{{{ $item->title }}}</div>
    <div>{{{ $item->category }}}</div>
    <div>{{{ $item->production }}}</div>
    <div>{{{ $item->actor }}}</div>
</div>
<hr>
@endforeach
{{ $data->appends(['sort' => 'votes'])->links() }}

ページネーションのコードは以下のようになりました。

<ul class="pagination"><li class="disabled"><span>&laquo;</span></li> <li class="active"><span>1</span></li><li><a href="http://localhost:8000/list?sort=votes&amp;page=2">2</a></li><li><a href="http://localhost:8000/list?sort=votes&amp;page=3">3</a></li><li><a href="http://localhost:8000/list?sort=votes&amp;page=4">4</a></li><li><a href="http://localhost:8000/list?sort=votes&amp;page=5">5</a></li> <li><a href="http://localhost:8000/list?sort=votes&amp;page=2" rel="next">&raquo;</a></li></ul>

ページネーションのURLにハッシュを追加してみます。

resources\views\list\index.blade.php

fragment()を使います。

@foreach($data as $item)
<div>
    <div>{{{ $item->id }}}</div>
    <div>{{{ $item->title }}}</div>
    <div>{{{ $item->category }}}</div>
    <div>{{{ $item->production }}}</div>
    <div>{{{ $item->actor }}}</div>
</div>
<hr>
@endforeach
{{ $data->fragment('foo')->links() }}

ページネーションのコードは以下のようになりました。

<ul class="pagination"><li class="disabled"><span>&laquo;</span></li> <li class="active"><span>1</span></li><li><a href="http://localhost:8000/list?page=2#foo">2</a></li><li><a href="http://localhost:8000/list?page=3#foo">3</a></li><li><a href="http://localhost:8000/list?page=4#foo">4</a></li><li><a href="http://localhost:8000/list?page=5#foo">5</a></li> <li><a href="http://localhost:8000/list?page=2#foo" rel="next">&raquo;</a></li></ul>

その他のヘルパーメソッド

その他のヘルパーメソッドを使ってみます。

resources\views\list\index.blade.php

@foreach($data as $item)
<div>
    <div>{{{ $item->id }}}</div>
    <div>{{{ $item->title }}}</div>
    <div>{{{ $item->category }}}</div>
    <div>{{{ $item->production }}}</div>
    <div>{{{ $item->actor }}}</div>
</div>
<hr>
@endforeach
<div>現在のページに表示されている件数: {{ $data->count() }}</div>
<div>現在のページ数: {{ $data->currentPage() }}</div>
<div>現在のページの最初の要素: {{ $data->firstItem() }}</div>
<div>次のページがあるかどうか: {{ $data->hasMorePages() }}</div>
<div>現在のページの最後の要素: {{ $data->lastItem() }}</div>
<div>最後のページ数: {{ $data->lastPage() }}</div>
<div>次のページのURL: {{ $data->nextPageUrl() }}</div>
<div>1ページに表示する件数: {{ $data->perPage() }}</div>
<div>前のページのURL: {{ $data->previousPageUrl() }}</div>
<div>合計件数: {{ $data->total() }}</div>
<div>指定ページのURL: {{ $data->url(4) }}</div>

2ページ目(http://localhost:8000/list?page=2)で確認すると、以下のように表示されました。

try-to-implement-pagination-in-laravel05

count()	現在のページに表示されている件数を取得。
currentPage()	現在のページ数を取得。
firstItem()	現在のページの最初の要素のidを取得。
hasMorePages()	次のページがあるかどうかを取得。
lastItem()	現在のページの最後の要素のidを取得。
lastPage()	最後のページ数を取得。
nextPageUrl()	次のページのURLを取得。
perPage()	1ページに表示する件数を取得。
previousPageUrl()	前のページのURを取得。L
total()	合計件数を取得。
url(num)	指定ページのURLを取得。

結果をjson形式で取得

json形式で表示してみます。

app\Http\Controllers\AnimationController.php

<?php
 
namespace App\Http\Controllers;
 
use App\Autumn2016;
 
class AnimationController extends Controller
{
    public function getIndex()
    {
        return Autumn2016::paginate(3);
    }
}

以下のように出力されました、

{
	"total":13,
	"per_page":3,
	"current_page":1,
	"last_page":5,
	"next_page_url":"http:\/\/localhost:8000\/list?page=2",
	"prev_page_url":null,
	"from":1,
	"to":3,
	"data":[
		{
			"id":1,
			"title":"\u97ff\u3051\uff01\u30e6\u30fc\u30d5\u30a9\u30cb\u30a2\u30e02",
			"category":"\u5c0f\u8aac",
			"production":"\u4eac\u90fd\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3",
			"actor":"\u9ed2\u6ca2\u3068\u3082\u3088"
		},{
			"id":2,
			"title":"3\u6708\u306e\u30e9\u30a4\u30aa\u30f3",
			"category":"\u6f2b\u753b",
			"production":"\u30b7\u30e3\u30d5\u30c8",
			"actor":"\u6cb3\u897f\u5065\u543e"
		},{
			"id":3,
			"title":"\u9b54\u6cd5\u5c11\u5973\u80b2\u6210\u8a08\u753b",
			"category":"\u5c0f\u8aac",
			"production":"Lerche",
			"actor":"\u6771\u5c71\u5948\u592e"
		}
	]
}

【参考サイト】

ペジネーション 5.2 Laravel

日	月	火	水	木	金	土
	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

Laravelでページネーションを実装してみる

準備

app\Autumn2016.php

app\Http\routes.php

app\Http\Controllers\AnimationController.php

resources\views\list\index.blade.php

ページネーションの設定

app\Http\Controllers\AnimationController.php

resources\views\list\index.blade.php

app\Http\Controllers\AnimationController.php

ページネーションのURLを変更する

resources\views\list\index.blade.php

resources\views\list\index.blade.php

その他のヘルパーメソッド

resources\views\list\index.blade.php

結果をjson形式で取得

app\Http\Controllers\AnimationController.php

コメントを残すコメントをキャンセル

Category

Tag

Recent

Laravelでページネーションを実装してみる

準備

app\Autumn2016.php

app\Http\routes.php

app\Http\Controllers\AnimationController.php

resources\views\list\index.blade.php

ページネーションの設定

app\Http\Controllers\AnimationController.php

resources\views\list\index.blade.php

app\Http\Controllers\AnimationController.php

ページネーションのURLを変更する

resources\views\list\index.blade.php

resources\views\list\index.blade.php

その他のヘルパーメソッド

resources\views\list\index.blade.php

結果をjson形式で取得

app\Http\Controllers\AnimationController.php

関連記事

PHPのglob()を使ってみる

お問い合わせフォームの送信内容をスプレッドシートに追加する

PHPからスプレッドシートに書き込む

Signing Secretを使ってSlackからのリクエストを検証する

SlackのSlash Commandsでコマンドを作成する

コメントを残す コメントをキャンセル

Category

Tag

Recent

コメントを残すコメントをキャンセル