Laravel 9でYajra DataTableを使用したボタン付きのデータテーブル


  1. カスタムアクションボタンの追加: データテーブルにカスタムアクションボタンを追加するには、以下の手順を実行します。

まず、composer.jsonファイルでyajra/laravel-datatables-oracleパッケージをインストールします。

"require": {
    "yajra/laravel-datatables-oracle": "^9.0"
}

次に、config/app.phpファイルのproviders配列に、Yajra\DataTables\DataTablesServiceProvider::classを追加します。

'providers' => [
    // 他のプロバイダー
    Yajra\DataTables\DataTablesServiceProvider::class,
]

その後、データテーブルを作成するコントローラーメソッドで、DataTablesファサードとEloquentモデルを使用してデータを取得します。そして、addColumnメソッドを使用してカスタムアクションボタンを追加します。

use Yajra\DataTables\DataTables;
public function getData()
{
    $data = YourModel::query();
    return DataTables::of($data)
        ->addColumn('action', function ($row) {
            $button = '<button class="btn btn-primary">編集</button>';
            $button .= '<button class="btn btn-danger">削除</button>';
            return $button;
        })
        ->rawColumns(['action'])
        ->make(true);
}

最後に、データテーブルを表示するビューファイルで、datatable()関数を使用してデータテーブルを初期化します。

$(document).ready(function() {
    $('#datatable').DataTable({
        processing: true,
        serverSide: true,
        ajax: '{!! route('your-route-name') !!}',
        columns: [
            // 列の定義
            { data: 'id', name: 'id' },
            { data: 'name', name: 'name' },
            { data: 'action', name: 'action', orderable: false, searchable: false },
        ]
    });
});
  1. ボタンクリックイベントの追加: データテーブルのボタンにクリックイベントを追加するには、以下の手順を実行します。

まず、データテーブルのビューファイルで、ボタンにクリックイベントを追加します。

$(document).ready(function() {
    $('#datatable').DataTable({
        // データテーブルの設定
    });
    // ボタンのクリックイベント
    $('#datatable').on('click', '.btn', function() {
        // ボタンがクリックされた時の処理
    });
});

以上が、Laravel 9でYajra DataTableを使用してボタン付きのデータテーブルを作成する方法です。これらのコード例を使って、自身のプロジェクトに適用してみてください。