Get 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 happy
Mati


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

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() !!}
@endpush


4. 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.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
buy metronic

React Dev Vacancy

KeenThemes is looking for a Junior React or Vue developer to build awesome apps.
Apply