Hi, If you are new to yajra/laravel-datatables
follow the installation or new to Laravel DataTables as a Service Implementation, I recommend you to have a look at it here.
We’ll be rendering 2 data-table in 1 view quick and easy using latest version of yajra/laravel-datatables
as a service.
Step 1 — Define Route
Add the below code in routes/web.php file to instantiate the route. Note the extra route dashboard.user
and dashboard.notice
.
Route::get('/',[App\Http\Controllers\DashboardController::class, 'index'])->name('dashboard.index');
Route::get('user',[App\Http\Controllers\DashboardController::class, 'getUser'])->name('dashboard.user');
Route::get('notice',[App\Http\Controllers\DashboardController::class,'getNotice'])->name('dashboard.notice');
Step 2 — Generate and Set Up Controller
Run command to create DashboardController.
php artisan make:controller DashboardController
Add code in app/Http/Controllers/DashboardController.php file. Note the two DataTable Service Class implementation.
<?php | |
namespace App\Http\Controllers; | |
use Illuminate\Http\Request; | |
use App\DataTables\UserDataTable; | |
use App\DataTables\NoticeDataTable; | |
use Response; | |
class DashboardController extends Controller | |
{ | |
/** | |
* Create a new controller instance. | |
* | |
* @return void | |
*/ | |
public function __construct() | |
{ | |
} | |
/** | |
* Display a listing of the User and Notice. | |
* | |
* @param UserDataTable $userDataTable | |
* @param NoticeDataTable $noticeDataTable | |
* @return Response | |
*/ | |
public function index(UserDataTable $userDataTable, NoticeDataTable $noticeDataTable) | |
{ | |
return view('dashboard.index', [ | |
'userDataTable' => $userDataTable->html(), | |
'noticeDataTable' => $noticeDataTable->html() | |
]); | |
} | |
public function getUser(UserDataTable $userDataTable) | |
{ | |
return $userDataTable->render('dashboard.index'); | |
} | |
public function getNotice(NoticeDataTable $noticeDataTable) | |
{ | |
return $noticeDataTable->render('dashboard.index'); | |
} | |
} |
Step 3— Generate DataTable Service
Run command to create UserDataTable and NoticeDataTable.
php artisan datatables:make User
php artisan datatables:make Notice
Place the below code in app/DataTables/UserDataTable.php ** and **app/DataTables/NoticeDataTable.php
<?php | |
namespace App\DataTables; | |
use App\Models\User; | |
use Yajra\DataTables\Html\Button; | |
use Yajra\DataTables\Html\Column; | |
use Yajra\DataTables\Html\Editor\Editor; | |
use Yajra\DataTables\Html\Editor\Fields; | |
use Yajra\DataTables\Services\DataTable; | |
class UserDataTable extends DataTable | |
{ | |
/** | |
* Build DataTable class. | |
* | |
* @param mixed $query Results from query() method. | |
* @return \Yajra\DataTables\DataTableAbstract | |
*/ | |
public function dataTable($query) | |
{ | |
return datatables() | |
->eloquent($query) | |
->addColumn('action', 'user.action'); | |
} | |
/** | |
* Get query source of dataTable. | |
* | |
* @param \App\Models\User $model | |
* @return \Illuminate\Database\Eloquent\Builder | |
*/ | |
public function query(User $model) | |
{ | |
return $model->newQuery()->select('user.*'); | |
} | |
/** | |
* Optional method if you want to use html builder. | |
* | |
* @return \Yajra\DataTables\Html\Builder | |
*/ | |
public function html() | |
{ | |
return $this->builder() | |
->setTableId('user-data-table') | |
->columns($this->getColumns()) | |
->minifiedAjax(route('dashboard.user')) | |
->dom('lfrtip'); | |
} | |
/** | |
* Get columns. | |
* | |
* @return array | |
*/ | |
protected function getColumns() | |
{ | |
return [ | |
Column::make('id'), | |
Column::make('name'), | |
Column::computed('action') | |
->exportable(false) | |
->printable(false) | |
->width(80) | |
->addClass('text-center') | |
]; | |
} | |
/** | |
* Get filename for export. | |
* | |
* @return string | |
*/ | |
protected function filename() | |
{ | |
return 'User_' . date('YmdHis'); | |
} | |
} |
<?php | |
namespace App\DataTables; | |
use App\Models\Notice; | |
use Yajra\DataTables\Html\Button; | |
use Yajra\DataTables\Html\Column; | |
use Yajra\DataTables\Html\Editor\Editor; | |
use Yajra\DataTables\Html\Editor\Fields; | |
use Yajra\DataTables\Services\DataTable; | |
class NoticeDataTable extends DataTable | |
{ | |
/** | |
* Build DataTable class. | |
* | |
* @param mixed $query Results from query() method. | |
* @return \Yajra\DataTables\DataTableAbstract | |
*/ | |
public function dataTable($query) | |
{ | |
return datatables() | |
->eloquent($query) | |
->addColumn('action', 'notice.action'); | |
} | |
/** | |
* Get query source of dataTable. | |
* | |
* @param \App\Models\Notice $model | |
* @return \Illuminate\Database\Eloquent\Builder | |
*/ | |
public function query(Notice $model) | |
{ | |
return $model->newQuery()->select('notice.*'); | |
} | |
/** | |
* Optional method if you want to use html builder. | |
* | |
* @return \Yajra\DataTables\Html\Builder | |
*/ | |
public function html() | |
{ | |
return $this->builder() | |
->setTableId('notice-data-table') | |
->columns($this->getColumns()) | |
->minifiedAjax(route('dashboard.notice')) | |
->dom('lfrtip'); | |
} | |
/** | |
* Get columns. | |
* | |
* @return array | |
*/ | |
protected function getColumns() | |
{ | |
return [ | |
Column::make('id'), | |
Column::make('name'), | |
Column::computed('action') | |
->exportable(false) | |
->printable(false) | |
->width(80) | |
->addClass('text-center') | |
]; | |
} | |
/** | |
* Get filename for export. | |
* | |
* @return string | |
*/ | |
protected function filename() | |
{ | |
return 'Notice_' . date('YmdHis'); | |
} | |
} |
Note on line 48, minifiedAjax(route(‘dashboard.user’))
? It calls the route defined earlier to fetch user.
Step 4— Setup Blade View
Head over to the resources/views folder and create a dashboard/index.blade.php file and insert the below code in it.
@extends('layouts.app')
@section('content')
<div class="row">
<div class="table-responsive">
{{$userDataTable->table(['width' => '100%', 'id'=>'user-data-table', 'class' => 'table table-striped dataTable'])}}
</div>
<div class="table-responsive">
{{$noticeDataTable->table(['width' => '100%', 'id'=>'notice-data-table', 'class' => 'table table-striped dataTable'])}}
</div>
</div>
@endsection
@push('scripts')
{{$userDataTable->scripts()}}
{{$noticeDataTable->scripts()}}
@endpush
And That’s it. Enjoy!
The post Multiple Laravel DataTables in one view — as a Service Implementation first appeared on Anlisha Maharjan.
Top comments (0)