Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

El conde Lucanor's avatar

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

0 likes
0 replies

Please or to participate in this conversation.