datatables in a modal: did not show in table format
datatables in a modal: did not show in table format
![arfam](https://secure.gravatar.com/avatar/06522eee5663652d6239c8dbfbb758b0/?default=https%3A%2F%2Fvanillicon.com%2F06522eee5663652d6239c8dbfbb758b0_200.png&rating=g&size=120)
Please, how to fix it?
Bootstrap 5
<!-- Modal -->
<div class="modal fade" id="stdEnrollsModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Matriculas do aluno</h5>
</div>
<table id="teste" class="display nowrap" style="width:100%"></table>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
<!-- <button type="button" class="btn btn-primary">Save changes</button> -->
</div>
</div>
</div>
</div>
<script>
function showStdEnrolls(dataArray){
// 'show': show modal
$('#stdEnrollsModal').modal('show');
// table: to check on click - new version
let table = $('#teste').DataTable({
data: dataArray,
// TABLE HEADINGS BELOW
columns: [
{"title":"Id"},
{"title":"Col-1"},
{"title":"Col-2"},
{"title":"Col-3"},
{"title":"Col-4"},
{"title":"Col-5"},
{"title":"Col-6"},
{"title":"Col-7"},
{"title":"Col-8"},
{"title":"Col-9"},
{"title":"Col-10"},
{"title":"Col-11"},
{"title":"Col-12"},
],
responsive: true,
retrieve: true,
"language": {
"url": "https://cdn.datatables.net/plug-ins/1.11.5/i18n/pt-BR.json"
},
})
$('#teste').html(dataArray)
}
</script>
This question has an accepted answers - jump to answer
Answers
Since you marked everything out its hard to see what the display looks like. It looks like you are using the default Datatables styling instead of using the Bootstrap5 style integration files. You can get the proper files from the Download Builder. You might also need to use
columns.adjust()
andresponsive.recalc()
to have Datatables update its display when when the modal is shown, ie, in theshow.bs.modal
event. Similar to this example.If you still need help please provide a link to your page or a test case replicating the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Kevin
Hi Kevin,
Thank you for your quick reply!
Bellow 2 updated images of the issue. I'll try all yours tips and I'll give feedback; thank you again.
This is the data I created for this example
let stdEnrolls = [[5, 3, , 3, '1700145M', 'Student 1', 'PM', 'EM', '3S', '01/2019', '12/2019', 'M', 'E02M'], [6, 3, , 3, '1700145T', 'Student 1', 'PM', 'TEPC', '3S', '01/2019', '12/2019', 'M', 'E02T']]
Thanks for the additional info, it helps. Just noticed this:
You don't need to do this with Datatables. You have
data: dataArray,
which will populate the table. Everything else looks ok.Kevin
Hi Kevin,
Thank you again for you reply.
New issues:
Some images below to help
I'll try to create a test case in live.datatables.net (I don't know how it works). I apologize for any inconvenience.
You have
retrieve
set to true. This won't use any of the options includingdata: dataArray,
so the data isn't updated. Try usingdestroy
instead. Replaceretrieve: true,
withdestroy: true,
. This will reinitialize Datatables with the new data.Kevin
Hi Kevin
It worked fine, perfect! I'd like to buy you a beer. Thank you so much for your kindly assistence.
Hi Kevin,
I am experiencing now the below issue:
* the button "Matriculas" only works if I minimize the browser. With full size browser window the 'table.row( event.target).data()' did not trigger the event (source belo:
Please, take a look at the images:
There is nothing obvious in your code snippets that indicate the problem. Please post a link to your page or a test case replicating the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Kevin
You may need to get the
tr
tag the clicked button is on to use as therow-selector
. Something like this:Kevin
Hi Kevin,
test case : https://jsbin.com/neyusuk/edit?html,css,js,console,output
It looks like you didn't implement Kevin's code - see your example updated here: https://jsbin.com/kixokiwege/1/edit?js,output
Colin
Hi colin,
Thaks for your reply.
In your exemple when I click in button "Matrículas" (last column in each row) the modal did not opened neither in minimized or maximized browser.
In my exemple the modal opens when the browser is minimized but did not open when the browser is maximized (full size), this is the last issue I'm experiencing.
Please, take a look at the image of the console (your exemple) when I clicked in button "Matrículas": it shows undefined.
I commented out the modal code, just to show the code that displays the row data, but yep, I see that too.
Kevin's example from this thread should help, it's demonstrating this,
Colin
Maybe there is an issue in datatable that I work arounded it as below, but I hope that Datables support team could fix it .
I
The thing to do is to inspect the HTML when button column is in Responsive and when it is not. Take a look at the differences to see how to navigate the HTML to get the correct
tr
. I updated the example like this:The child
tr
will have the classchild
. If the -tag trhas the class
childthen you will need to get the previous sibling which is the parent
-tag tr` with the row data. See updated example here:https://jsbin.com/yawovifeza/1/edit?js,output
Kevin
Works great, thank you!