Having trouble with my Bootstrap DataTable. I followed the documentation and added the necessary HTML and Javascript code, but the table is not responsive or flexing as expected. I have checked all the links and imports, so I'm unsure where the issue lies:
$(document).ready(function() {
$("#feedback").DataTable({
aaSorting: [],
responsive: true,
columnDefs: [
{
responsivePriority: 1,
targets: 0
},
{
responsivePriority: 2,
targets: -1
}
]
});
$('[data-toggle="tooltip"]').tooltip();
} );<div id="div-feedback" class="container">
<div class="row py-5">
<div class="col-12">
<table id="feedback" class="table table-striped table-bordered responsive" style="width: 100%;">
<thead>
<tr>
<th>#ID</th>
<th>Titolo</th>
<th>Commento</th>
<th>Valutazione</th>
<th>Azione</th>
</tr>
</thead>
<tbody>
<%
if ( feedback != null && feedback.size() != 0) {
for ( FeedbackBean fb: feedback) {
%>
<tr>
<td><%=fb.getIdFeedback() %></td>
<td><%=fb.getTitolo() %></td>
<td><%=fb.getCommento() %></td>
<td><%=fb.getValutazione() %></td>
<td><button type="button" class="btn bg-cart">Elimina</button></td>
</tr>
<%}} %>
</tbody>
</table>
</div>
</div>
</div>