Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$
Multiple Datatables in one view / controller Laravel Yajra Service
Hi,
I have implemented a datatable from the Laravel example (starter-kit).
The datatable works perfectly - it lists all of my Clients in the clients.index view
public function index(ClientsDataTable $datatable)
{
return $datatable->render("pages.clients.index");
}and in my ClientsDataTable.php:
public function dataTable(QueryBuilder $query): EloquentDataTable
{
return (new EloquentDataTable($query))
->editColumn("name", function (Client $client) {
return "<span class="fw-bolder">" . $client->name . "</span>";
})
// etc
->escapeColumns([])
->setRowId("id");
}
public function query(Client $model): QueryBuilder
{
return $model->newQuery();
}
public function html(): HtmlBuilder
{
return $this->builder()
->setTableId("clients-table")
->columns($this->getColumns())
->minifiedAjax()
->dom("<"row"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"f>><"row"<"col-sm-12"t>><"row"<"col-sm-12 col-md-8"l><"col-sm-12 col-md-4"p>>")
->addTableClass("table align-middle table-row-solid gy-5 dataTable no-footer fw-semibold")
->setTableHeadClass("text-start fw-bold gs-0 table-light")
->responsive(true);
}
public function getColumns(): array
{
return [
Column::make("number")
->title("Number"),
// etc
];
}
protected function filename(): string
{
return "Clients_" . date("YmdHis");
}but now I am building the clients.show view where I would like to put two seperate datatables related to a specific Client that I'm viewing:
1. Client Contacts - a list of contacts related to the client_id in the database
2. Client Orders - a list of orders related to the client_id in the database
I have two other models
ClientContact
ClientOrder
How should I properly code the controller / datatable class / the view for the tables and all requests and functionality to work properly?
Thanks in advance
Mati
Replies (1)
To implement multiple DataTables in one controller, you can try to follow these steps:
Note: we did not test it. Please refer to the Yajra Datatables documentation for more details.
1. Controller:
In your ClientsController, you can modify the show method to pass data for both Client Contacts and Client Orders:
use App\DataTables\ClientContactsDataTable;
use App\DataTables\ClientOrdersDataTable;
use App\Models\Client;
public function show(Client $client, ClientContactsDataTable $contactsDataTable, ClientOrdersDataTable $ordersDataTable)
{
return view("pages.clients.show", [
"client" => $client,
"contactsDataTable" => $contactsDataTable->html()->ajax([
"url" => route("clients.contacts", $client->id),
"type" => "GET",
]),
"ordersDataTable" => $ordersDataTable->html()->ajax([
"url" => route("clients.orders", $client->id),
"type" => "GET",
]),
]);
}2. DataTables for Contacts and Orders:
Create separate DataTable classes for ClientContactsDataTable and ClientOrdersDataTable similarly to what you did for the ClientsDataTable.
3. Views:
In your clients.show view, you can include the DataTables:
@extends("layouts.app")
@section("content")
<div class="container">
<h1>{{ $client->name }}</h1>
<div class="mb-4">
<h2>Client Contacts</h2>
{!! $contactsDataTable->table(["class" => "table table-bordered table-hover"]) !!}
</div>
<div class="mb-4">
<h2>Client Orders</h2>
{!! $ordersDataTable->table(["class" => "table table-bordered table-hover"]) !!}
</div>
</div>
@endsection
@push("scripts")
{!! $contactsDataTable->scripts() !!}
{!! $ordersDataTable->scripts() !!}
@endpush4. Routes:
Define routes for fetching data for both Contacts and Orders:
// web.php
Route::get("/clients/{client}/contacts", "ClientContactsController@index")->name("clients.contacts");
Route::get("/clients/{client}/orders", "ClientOrdersController@index")->name("clients.orders");5. Controller for Contacts and Orders:
Create controllers (ClientContactsController and ClientOrdersController) with methods to handle DataTables requests for Contacts and Orders.
Now, when you navigate to the clients.show page, the DataTables for Client Contacts and Client Orders should be populated with data related to the specific client.
Note: Adjust the namespaces and class names according to your application structure. This is a basic outline, and you may need to make adjustments based on your specific requirements.
