【Laravel】Sortableを使用して簡単にソート機能を実装

6478 ワード
sortable PHP 初心者向け Laravel 簡単 PHP テキストリンク

はじめに

データ一覧画面でソート機能を付けたいなぁ。
よし、JavaScriptを使ってごそごそして～...ってめちゃくちゃ面倒！！
ってことがあったので、ソート機能が簡単に実装できるパッケージを紹介します。

開発環境

OS Windows10
PHP 7.4.7
Laravel 8.45.1

事前準備

先ずはcomposerから、今回使用する「kyslik/column-sortable」のパッケージを追加します。
$ composer require kyslik/column-sortable

開発

大まかなフローとして、
①ModelにSortableを宣言
②ControllerでDBからデータを取得
③Viewで表示
となります。

①ModelにSortableを宣言

対象のModelにSortableをuse宣言します。

Models/Post.php
<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;
use Kyslik\ColumnSortable\Sortable; // 追加

class Post extends Model
{
    use Sortable;  // 追加
}

②ControllerでDBからデータを取得

ControllerにSortableのクエリビルダを追加します。

Controllers/PostsController.php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Post;

class PostsController extends Controller
{

    public function index()
    {
        $posts = Post::sortable()->get(); //sortable() を先に宣言
        return view('posts.index')->with('posts', $posts);
    }
    .
    .
    .
}

③Viewで表示

テーブル構造のカラムに該当する部分にSrotable linkを付与します。
記法は下記になります。
@sortablelink('*column_name*', '*カラム名称*')

posts/index.blade.php
<div>
    <table class="table table-bordered">
        <thead>
        <tr>
            <th scope="col">@sortablelink('id', 'ID')</th>
            <th scope="col">@sortablelink('title', 'タイトル')</th>
            <th scope="col">@sortablelink('text', '本文')</th>
            <th scope="col">@sortablelink('created_at', '作成日時')</th>
            <th scope="col">@sortablelink('updated_at', '更新日時')</th>
        </tr>
        </thead>
        <tbody>
        @foreach($posts as $post)
        <tr>
            <th scope="row">{{ $post->id }}</th>
            <td>{{ $post->title }}</td>
            <td>{{ $post->text }}</td>
            <td>{{ $post->created_at }}</td>
            <td>{{ $post->updated_at }}</td>
        </tr>
        @endforeach 
        </tbody>
    </table>
    </div>
</div>

デモ

終わりに

何か機能を追加したい！という場合は大体パッケージとして落ちているので、実装する前に探してみると良いと思います。
今回のソート機能はページネーションとも併せて使用できるので、お勧めです！

Github reference