UnsplashのRamon Kagieが撮影した写真

はじめに

データ一覧などの下にある↓これをページネーションというのですが、

　

Laravelではとても簡単に実装できます。
コントローラに1行、ビューに１行するだけです。

わずか２行で以下のように一覧表の下にページネーションを追加できます。

本題

さっそくページネーションを追加する手順です。

１．コントローラを編集する

モデルから複数レコードを取得している行に「->paginate()」をつけるだけです。

　

public function index()
{
    // メッセージ一覧を取得　　※1ページに25件表示するよう設定
    $messages = Message::orderBy('id', 'desc')->paginate(25);

    // メッセージ一覧ビューでそれを表示
    return view('messages.index', [
        'messages' => $messages,  // ビューにデータを渡す
    ]);
}

２．ビューを編集する

ビュー側の編集内容としては
　↓これを表示させたい箇所に１行

以下を追記するだけです。

データを格納した変数->links()
例）{{ $messages->links() }}

　

以下は例です。

@extends('layouts.app')
@section('content')

    <div class="prose ml-4">
        <h2 class="text-lg">メッセージ一覧</h2>
    </div>

    @if(isset($messages))
        <table class="table table-zebra w-full my-4">
            <thead>
                <tr>
                    <th>id</th>
                    <th>タイトル</th>
                    <th>メッセージ</th>
                </tr>
            </thead>
            <tbody>
                @foreach($messages as $message)
                <tr>
                    <td><a class="link link-hover text-info" href="{{route('messages.show', $message->id)}}">{{$message->id}}</a></td>
                    <td>{{$message->title}}</td>
                    <td>{{$message->content}}</td>
                </tr>
                @endforeach
            </tbody>
        </table>
    @endif

    {{-- ページネーションのリンク --}}
    {{ $messages->links() }}

    <a class="btn btn-primary" href="{{route('messages.create')}}">新規メッセージの投稿</a>
@endsection

　

ページネーションを追加する手順は以上です。