Multiple Laravel DataTables in one view — as a Service Implementation
Tags: laravel
Published: 2022-10-13 04:16:16

---
title: Multiple Laravel DataTables in one view — as a Service Implementation
published: true
date: 2022-01-25 16:15:00 UTC
tags: Laravel
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p6b84rpactgejpirjd9h.jpeg
canonical_url: https://anlisha.com.np/blog/multiple-laravel-datatables-in-one-view-as-a-service-implementation/
---

Hi, If you are new to `yajra/laravel-datatables` follow the [installation](https://yajrabox.com/docs/laravel-datatables/master/installation) or new to Laravel DataTables as a Service Implementation, I recommend you to have a look at it [here](https://datatables.yajrabox.com/service).  
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.

{% embed https://gist.github.com/anlisha-maharjan/f7cd1cd8701bd4c4bf9e9966423716dd %}

**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**

{% embed https://gist.github.com/anlisha-maharjan/bb1246d1afa1c1f41c9cbc2542adf851 %}

{% embed https://gist.github.com/anlisha-maharjan/ec849fa732ae2cea0dea20778b1d55df %}

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](https://anlisha.com.np/blog/multiple-laravel-datatables-in-one-view-as-a-service-implementation/) first appeared on [Anlisha Maharjan](https://anlisha.com.np/blog).