Laravel-datatables: Supporting multiple datatables in the same view

Created on 10 Mar 2017 · 3Comments · Source: yajra/laravel-datatables

Summary of problem or feature request

I have 2 datatables I need to show on the same page. They're already getting used on their own page, but the dashboard page will need to contain both of them.

The problems I encounter :

The HtmlBuilder builds on the existing table instead of start building a new table
Rendering the HTML and script in the view conflicts which each other

My questions :

Can I build a second table using the HtmlBuilder ?
Is there a way to make each table unique (with an ID?), so the rendered HTML and Script work based on that ID ?

Code snippet of problem

In my 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);
        });
    }

In the 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>
@endsection

System details

Operating System : Win 10 (Laragon 2.1.4)
PHP Version : 7.0.12
Laravel Version : 5.4.15
Laravel-Datatables Version : 7.3.0

Screenshot

question

Source

Mopster

All 3 comments

I did some digging around and found a way to get it to work.

I register my own builders :

    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);
        });
    }

Then in the boot method() I use the builders and set the table attribute '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);
        });
    }

Screenshot :

Searching and sorting are working.

Mopster on 10 Mar 2017

👍1

@Mopster I think you can also use below 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);
        });
    }

Using Datatables::getHtmlBuilder() will always return a single instance, while calling it in the IoC will create a new instance.