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

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

view raw DashboardController.php hosted with ❤ by GitHub

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

view raw UserDataTable.php hosted with ❤ by GitHub

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

view raw NoticeDataTable.php hosted with ❤ by GitHub

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.