Laravel-datatables: 同じビューで複数のデータテーブルをサポートする

作成日 2017年03月10日 · 3コメント · ソース: yajra/laravel-datatables

問題または機能のリクエストの概要

同じページに表示する必要のある2つのデータテーブルがあります。それらはすでに独自のページで使用されていますが、ダッシュボードページには両方を含める必要があります。

私が遭遇する問題：

HtmlBuilderは、新しいテーブルの作成を開始する代わりに、既存のテーブルに基づいて作成されます
ビューでのHTMLとスクリプトのレンダリングは、互いに競合します

私の質問：

HtmlBuilderを使用して2番目のテーブルを作成できますか？
各テーブルを（IDを使用して）一意にする方法はありますか？そのため、レンダリングされたHTMLとスクリプトはそのIDに基づいて機能しますか？

問題のコードスニペット

私のServiceProviderで：

    public function boot()
    {
        View::composer(['dashboard', 'user.index'], function(\Illuminate\View\View $view){
            $userTable = Datatables::getHtmlBuilder()
                ->addColumn(['data' => 'username', 'name' => 'username', 'title' => trans('messages.username')])
                ->addColumn(['data' => 'name_en', 'name' => 'name_en', 'title' => trans('messages.name (english)')])
                ->addColumn(['data' => 'name_jp', 'name' => 'name_jp', 'title' => trans('messages.name (japanese)')])
                ->addColumn(['data' => 'phone_number', 'name' => 'phone_number', 'title' => trans('messages.phone number')])
                ->addColumn(['data' => 'extension', 'name' => 'extension', 'title' => trans('messages.extension')])
                ->addAction([])
                ->ajax(route('user_index_data'))
            ;
            $view->with('userTable', $userTable);
        });

        View::composer(['dashboard', 'group.index'], function(\Illuminate\View\View $view) {
            $groupTable = DataTables::getHtmlBuilder()
                ->addColumn(['data' => 'username', 'name' => 'username', 'title' => trans('messages.group username')])
                ->addColumn(['data' => 'name', 'name' => 'name', 'title' => trans('messages.group name')])
                ->addColumn(['data' => 'users', 'name' => 'users', 'title' => trans('messages.active users')])
                ->addAction([])
                ->ajax(route('group_index_data'));
            $view->with('groupTable', $groupTable);
        });
    }

Dashboard.blade.php内

@section('content')
    <div class="row">
        <div class="col-sm-6 col-xs-12">
            {!! $userTable->table() !!}
            {!! $userTable->scripts() !!}
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6 col-xs-12">
            {!! $groupTable->table() !!}
            {!! $groupTable->scripts() !!}
        </div>
    </div>
<strong i="20">@endsection</strong>

システムの詳細

オペレーティングシステム：Win 10（Laragon 2.1.4）
PHPバージョン：7.0.12
Laravelバージョン：5.4.15
Laravel-Datatablesバージョン：7.3.0

スクリーンショット

question

ソース

Mopster

全てのコメント3件

私はいくつか掘り下げて、それを機能させる方法を見つけました。

私は自分のビルダーを登録します：

    public function register()
    {
        $this->app->bind('datatables.html.userTable', function () {
            return $this->app->make(Builder::class);
        });
        $this->app->bind('datatables.html.groupTable', function () {
            return $this->app->make(Builder::class);
        });
    }

次に、boot method（）でビルダーを使用し、テーブル属性 'id'を設定します。

    public function boot()
    {
        View::composer(['dashboard', 'user.index'], function(\Illuminate\View\View $view){
            $userTableBuilder = app('datatables.html.userTable');
            $userTable = $userTableBuilder
                ->setTableAttribute('id', 'userTable')
                ->addColumn(['data' => 'username', 'name' => 'username', 'title' => trans('messages.username')])
                ->addColumn(['data' => 'name_en', 'name' => 'name_en', 'title' => trans('messages.name (english)')])
                ->addColumn(['data' => 'name_jp', 'name' => 'name_jp', 'title' => trans('messages.name (japanese)')])
                ->addColumn(['data' => 'phone_number', 'name' => 'phone_number', 'title' => trans('messages.phone number')])
                ->addColumn(['data' => 'extension', 'name' => 'extension', 'title' => trans('messages.extension')])
                ->addAction([])
                ->ajax(route('user_index_data'))
            ;
            $view->with('userTable', $userTable);
        });

        View::composer(['dashboard', 'group.index'], function(\Illuminate\View\View $view) {
            $groupTableBuilder = app('datatables.html.groupTable');
            $groupTable = $groupTableBuilder
                ->setTableAttribute('id', 'groupTable')
                ->addColumn(['data' => 'username', 'name' => 'username', 'title' => trans('messages.group username')])
                ->addColumn(['data' => 'name', 'name' => 'name', 'title' => trans('messages.group name')])
                ->addColumn(['data' => 'users', 'name' => 'users', 'title' => trans('messages.active users')])
                ->addAction([])
                ->ajax(route('group_index_data'));
            $view->with('groupTable', $groupTable);
        });
    }

スクリーンショット：

検索と並べ替えが機能しています。

Mopster 2017年03月10日

👍1

@Mopster app('datatables.html')以下でも使用できると思います：

 public function boot()
    {
        View::composer(['dashboard', 'user.index'], function(\Illuminate\View\View $view){
            $userTable = app('datatables.html')
                ->addColumn(['data' => 'username', 'name' => 'username', 'title' => trans('messages.username')])
                ->addColumn(['data' => 'name_en', 'name' => 'name_en', 'title' => trans('messages.name (english)')])
                ->addColumn(['data' => 'name_jp', 'name' => 'name_jp', 'title' => trans('messages.name (japanese)')])
                ->addColumn(['data' => 'phone_number', 'name' => 'phone_number', 'title' => trans('messages.phone number')])
                ->addColumn(['data' => 'extension', 'name' => 'extension', 'title' => trans('messages.extension')])
                ->addAction([])
                ->ajax(route('user_index_data'))
            ;
            $view->with('userTable', $userTable);
        });

        View::composer(['dashboard', 'group.index'], function(\Illuminate\View\View $view) {
            $groupTable = app('datatables.html')                
->addColumn(['data' => 'username', 'name' => 'username', 'title' => trans('messages.group username')])
                ->addColumn(['data' => 'name', 'name' => 'name', 'title' => trans('messages.group name')])
                ->addColumn(['data' => 'users', 'name' => 'users', 'title' => trans('messages.active users')])
                ->addAction([])
                ->ajax(route('group_index_data'));
            $view->with('groupTable', $groupTable);
        });
    }

Datatables::getHtmlBuilder()すると、常に単一のインスタンスが返されますが、IoCで呼び出すと新しいインスタンスが作成されます。

yajra 2017年03月10日

@yajra確かに！ありがとう！