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"
		}
	]
}

　

【参考サイト】

　

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

Category

Tag

Recent

2024年11月
日 月 火 水 木 金 土
 12
3456789
10111213141516
17181920212223
24252627282930