はじめに
データ一覧画面でソート機能を付けたいなぁ。
よし、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>
デモ
終わりに
何か機能を追加したい！という場合は大体パッケージとして落ちているので、実装する前に探してみると良いと思います。
今回のソート機能はページネーションとも併せて使用できるので、お勧めです！