How can I open a modal with more info of which there is in my current table
How can I open a modal with more info of which there is in my current table
El_conde_Lucanor
Posts: 5Questions: 1Answers: 0
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();
}
}
This question has accepted answers - jump to:
Answers
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
@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 @?
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.
You don't have to use the
@. See the Markdown docs to learn how to quote using the>symbol.Kevin
@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_idperfeclty, but, how can I take thatcelda_iddata and use it in the modal?The
row().data()method Kevin mentioned would be the way to do it. In this case:Then you can use
data.ALU_IDetc.Allan
@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_idfrom the .js (orvar dataas ur example).Passing the data into a modal is not something built into Datatables. See if this SO thread about using HTML5 data attributes helps.
Kevin
Ok! All clear hehe.
Thanks @kthorngren and @allan