DEV Community

Cover image for Multiple Laravel DataTables in one view — as a Service Implementation
Anlisha Maharjan
Anlisha Maharjan

Posted on • Originally published at anlisha.com.np on

Multiple Laravel DataTables in one view — as a Service Implementation

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');
Enter fullscreen mode Exit fullscreen mode

Step 2 — Generate and Set Up Controller

Run command to create DashboardController.

php artisan make:controller DashboardController
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

And That’s it. Enjoy!

The post Multiple Laravel DataTables in one view — as a Service Implementation first appeared on Anlisha Maharjan.

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more