Skip to main content

blocs/admin: 一覧表示機能のカスタマイズ(検索・ソート・ページネーション)

blocs/admin: 一覧表示機能のカスタマイズ(検索・ソート・ページネーション)

自動生成された管理画面の一覧表示機能をカスタマイズする方法を説明します。テンプレートやコントローラーの編集により、検索・ソート・ページネーションを柔軟に調整できます。

前提条件: 自動生成ツールで管理画面を生成済みであること

テンプレートの一覧

共通テンプレートは resources/views/admin/base/index に格納されています。

テンプレート名 用途
header.html 画面上部のヘッダー部分
footer.html 画面下部のフッター部分
pagination.blade.php ページネーション(ページ送り)
search.html 検索フォームの表示
index.blocs.html 一覧表示画面のメインテンプレート

処理フロー

index, search
  ├─ prepareIndex .............. 表示データ準備
  │    ├─ prepareIndexSearch ... データ検索 ★
  │    └─ prepareIndexPaginate . ページネーション ★
  └─ outputIndex ............... 一覧画面表示

★ はオーバーライドによるカスタマイズポイントです。

ベースコントローラーのメソッド

可視性 メソッド名 処理内容
public index 登録データの一覧を表示
public search 条件を指定してデータを検索し、結果を一覧表示
protected prepareIndex 出力のためのデータ処理
protected prepareIndexSearch 条件指定・ソート処理 ★
protected prepareIndexPaginate ページネーション処理 ★
protected outputIndex ビューの出力処理

ベースコントローラーの主な変数

変数名 説明
$this->loopItem 一覧表示で使用するテーブル名
$this->paginateNum 1ページあたりの表示件数(0でページングなし)
$this->paginateName ページネーションのパラメータ名(デフォルトは page)
$this->searchItems 検索条件の配列

index と search の違い

index()search() はどちらも prepareIndexoutputIndex を呼び出しますが、以下の違いがあります。

メソッド リクエスト 用途
index() GET 初回表示。セッションに保存された検索条件を復元
search() POST 検索フォーム送信。$this->request に POST データをセットし、検索条件をセッションに保存

search() が呼ばれると、検索条件が変わったとみなされ、ページ番号が1にリセットされます。

keepItem() の優先順位

$this->keepItem($keyItem) はページ遷移時にデータを引き継ぐためのメソッドです。値の取得には以下の優先順位があります。

  1. POST リクエストの値
  2. GET パラメータの値
  3. セッションに保存された値

$this->viewPrefix が変更された場合、セッションの値はクリアされます。

検索条件の自動処理

検索キーワードは $this->searchItems に自動的に以下の処理が適用されます。

検索窓を設置する方法

テンプレート内で $searchPlaceholder を指定すると検索窓が表示されます。searchFilter を上書きすることで追加の検索フォームをカスタマイズできます。

テンプレートのサンプル(index.blocs.html)

$searchPlaceholder="Search by code"
data-bloc="searchFilter"

Year セレクトボックスなどを設置可能

コントローラーのサンプル

protected function prepareIndexSearch(&$mainTable)
{
    empty($this->val['year']) || $mainTable->where('year', $this->val['year']);

    foreach ($this->searchItems as $searchItem) {
        $mainTable->where(function ($query) use ($searchItem) {
            $query->where('code', 'LIKE', '%'.$searchItem.'%');
        });
    }
}

ソート機能の設定方法

一覧画面の カラムソート(列ヘッダーをクリックして asc/desc で並べ替え)の設定方法です。ドラッグ&ドロップによる 表示順並び替えorder_by の更新)は No.5.6 を参照してください。

テンプレート内で sortHeadersortHrefdata-include で指定します。ソート不要な項目には data-include を外してください。

テンプレートで使用できる変数

変数名 説明
$sortItem ソート対象の項目名(例:year)
$sortOrder ソート順序(asc または desc)
$sortClass ソート対象列に付与するクラス名

テンプレートのサンプル

data-include="sortHeader" $sortItem="year" $sortOrder="desc" $sortClass="d-none d-md-table-cell"

コントローラーのサンプル

protected function prepareIndexSearch(&$mainTable)
{
    $this->keepItem('sort');

    // ソート条件の初期化とバリデーション
    if (empty($this->val['sort']) || !is_array($this->val['sort'])) {
        $this->val['sort'] = [];
    } else {
        $this->val['sort'] = array_filter($this->val['sort'], 'strlen');
    }

    // ソート条件が空の場合、デフォルト値を設定
    if (empty($this->val['sort'])) {
        $this->val['sort'] = ['year' => 'desc', 'code' => 'asc'];
    }

    // 指定された条件でソート
    $allowedSortItems = ['year', 'code'];
    foreach ($allowedSortItems as $sortItem) {
        if (!empty($this->val['sort'][$sortItem])) {
            $mainTable->orderBy($sortItem, $this->val['sort'][$sortItem]);
        }
    }
}