How can I open a modal with more info of which there is in my current table

El_conde_Lucanor

I'm trying to do this example of bootstrap modal but I don't undertand how the responsive button appear all the time or how to show all the data I want to show.

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

Any idea or how to start? I copy pasted all the content of the previous link and it didn't work :S

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' },
            ],

            responsive : { (I don't know what to put) },
        });
    }
});

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();
    }
}

kthorngren

I don't undertand how the responsive button appear all the time or how to show all the data I want to show.

The responsive button appears when the table is larger than the container the table is in. If the table fits the responsive button is not shown. Is this what you are looking for?

Or are you looking for a way to click the row and display the modal, without responsive? Maybe something like this example but instead of the alert you would would display a modal. You can access the extra fields using row().data().

Kevin

El_conde_Lucanor

@kthorngren the second case is exactly the way I wanna show the modal.

But I saw the example of bootstrap modal that appear in the responsive and aesthetically is perfect.

Could I mixing the appearance of that modal with the extra info I wanna show it or is just exclusive using the responsive button?

P.D. Is this the only way can I answer or quoting you? With the @?

kthorngren

the second case is exactly the way I wanna show the modal.

You will need to create your own modal and lay it out the way you want. There are many tutorials, like this, to learn how to create a modal.

Is this the only way can I answer or quoting you? With the @?

You don't have to use the @. See the Markdown docs to learn how to quote using the > symbol.

Kevin

El_conde_Lucanor

@kthorngren

Okey, thanks for help! At the moment it works! But how can I pass a data to the js with these events into the modal? Because my modal must do a query thanks to that variable.

All of this is working, it takes the celda_id perfeclty, but, how can I take that celda_id data and use it in the modal?

$('#datatableapartadoalumno').on('click', 'tbody td', function() {
    console.log('Row content: ', this.textContent)

    var celda = $(this).closest("tr");
    var celda_id = celda.find("td:nth-child(1)").text();

    console.log(celda_id);

    $("#modal_celda_id").modal("show")
})

allan

The row().data() method Kevin mentioned would be the way to do it. In this case:

var data = $('#datatableapartadoalumno').DataTable().row(this.parentNode).data();

Then you can use data.ALU_ID etc.

Allan

El_conde_Lucanor

@allan but that var is already created (celda_id) and working.

Now, in the modal (or in any html), how can I use this var celda_id from the .js (or var data as ur example).

kthorngren

Passing the data into a modal is not something built into Datatables. See if this SO thread about using HTML5 data attributes helps.

Kevin

El_conde_Lucanor

Ok! All clear hehe.

Thanks @kthorngren and @allan