やりたいこと
- laravelのページネーション機能で一覧画面を作る
- 一覧は各カラムでソートができるようにする
使うもの
- laravel 5.5
- Kyslik/column-sortable
やった
composerからインストール
$ composer require kyslik/column-sortable
各種設定
コンフィグファイル追加
$ php artisan vendor:publish --provider="Kyslik\ColumnSortable\ColumnSortableServiceProvider" --tag="config"
でconfig/columnsortable.phpが生成される。
providers
config/app.php
'providers' => [
/*
* 追加
*/
Kyslik\ColumnSortable\ColumnSortableServiceProvider::class,
],
実装
Model
config/app.php
<?php
namespace App;
use Illuminate\Notifications\Notifiable;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Kyslik\ColumnSortable\Sortable; // 追加
class User extends Authenticatable
{
use Notifiable;
use Sortable; // 追加
public $sortable = ['name', 'login_id']; // ソート対象カラム追加
Controller
UserController.php
use Illuminate\Http\Request;
use App\User;
class UserController extends Controller
{
public function index(User $user)
{
// sortable()を追加
$users = $user->sortable()->paginate(10);
return view('user.index', ['users' => $users]);
}
}
View
bladeに@sortablelink() を記載するとソートボタンになるっぽい。
@sortablelink('column', 'Title', ['parameter' => 'smile'], ['rel' => 'nofollow'])
第1引数：ソート対象のカラム名
第2引数：表示する文字列(省略するとカラム名を表示)
第3引数：デフォルトのクエリストリング(省略可)
第4引数：追加のアンカータグの属性(省略可)
使い方としては<th> @sortablelink('name', '名前') </th>みたいな感じ。
クリックするとsort=name&direction=descのようなパラメータがついて同じ画面をgetする。
見た目に関して
Font Awesome
このままでも使えるけどソート状態を示すアイコンがほしい。
デフォルトでFont Awesomeに対応してるっぽいのでついでに導入。
index.blade.php
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
アイコン指定
ソートするカラム名によってclassの指定が可能。
FontAwesomeのアイコンはここで設定。
fa-はFontAwesome使用のプレフィックスかな？
config/columnsortable.php
<?php
return [
/*
spec columns
*/
'columns' => [
// 文字列
'alpha' => [
'rows' => ['description', 'email', 'name', 'slug'],
'class' => 'fa fa-sort-alpha',
],
// 量
'amount' => [
'rows' => ['amount', 'price'],
'class' => 'fa fa-sort-amount',
],
// 数値
'numeric' => [
'rows' => ['created_at', 'updated_at', 'level', 'id', 'phone_number'],
'class' => 'fa fa-sort-numeric',
],
],
アイコン(asc/desc)
Font Awesome 5から以下の修正が必要。
config/columnsortable.php
/*
suffix class that is appended when ascending direction is applied
*/
// 'asc_suffix' => '-asc',
'asc_suffix' => '-up',
/*
suffix class that is appended when descending direction is applied
*/
// 'desc_suffix' => '-desc',
'desc_suffix' => '-down',
...って公式に書いてあるけどalphaとnumericはupとdown逆な気がする。
(自分の感覚がおかしいのか？)
amountは合ってそうだから悩ましい。
sort up のアイコン(amount以外desc感)
sort down のアイコン(amount以外asc感)
めんどくせぇからv4を使おう(思考停止)
もしくはcss自作する必要がありそう。