Any way to open a modal with the data brought from the event? (Laravel + Datatable + JS)
I've a table that show data thanks to the datatables architecture.
I want to click any row in order to appear a modal with more info of this specific data
inscripcionesweb.blade.php
<div id="inscripcioneswebs">
<table id="datatableapartadoalumno" class="table table-striped">
<thead>
<tr>
<th>ID</th>
<th>NAME</th>
</tr>
</thead>
</table>
</div>
inscripcioneswebs.js
new Vue({
el: '#inscripcioneswebs',
mounted() {
$('#datatableapartadoalumno').DataTable({
ajax: '/datatable/inscripcioneswebsapartadoalumno',
columns: [
{ data: 'ALU_ID' },
{ data: 'ALU_NAME' },
],
});
}
});
web.php
Route::get('datatable/inscripcioneswebsapartadoalumno', [DatatableController::class, 'inscripcioneswebsapartadoalumno']);
DatatableController.php
namespace App\Http\Controllers;
use App\Models\Alumnos;
class DatatableController extends Controller
{
public function alumnos() {
return datatables()->collection(Alumnos::all())->toJson();
}
}
In the DB where I take the ALU_ID and the ALU_NAME there are more fields that I would to show in the modal.
At the moment the event I've created in inscripcioneswebs.js is:
$('#datatableapartadoalumno').on('click', 'tbody td', function() {
console.log('Row content: ', this.textContent)
var row = $(this).closest("tr");
var row_id = row.find("td:nth-child(1)").text();
console.log(row_id);
$("#modalCRUD").modal("show")
})
And, in the blade, I've the modal that works, but it doesn't show the extra data I want.
Any easy idea? I tried soooo many things, but I can't advance more than the inscripcioneswebs.js to show just the specific data of that row.
I don't know how to create the query, where create it, etc...
Please or to participate in this conversation.