Responsive BS4 DataTables Not Doing Anything At All (Responsive-wise)
Responsive BS4 DataTables Not Doing Anything At All (Responsive-wise)
Webworthy Design
Posts: 1Questions: 1Answers: 0
Everything else seems to be working (sorting, pagination, etc). I added the responsiveness today but it acts like nothing happened. When I drag in my browser edge the tables just blows out of the containing div... As a test I tried loading one of the demos up in codepen and it worked. So I copy/pasted the same demo into my app, including their cdn links, but whenever I try and get it to work in my app nothing happens (I'm building something in Laravel with BS4). I've checked and checked again. I'm at a total loss. I've been toying with it for hours... hoping someone can help get me through this. Here's the code I'm working with if it helps...
MY TABLE
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header" style="display: flex; align-items: center; justify-content: space-between;">
<h5><i class="fas fa-users fa-fw"></i> Families</h5>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addFamily">
<i class="fas fa-plus"></i> Add Family
</button>
</div>
<div class="card-body">
<table class="table table-bordered table-hover mb-0 dt" width="100%">
<thead>
<tr>
<th>Parent 1 First Name</th>
<th>Parent 1 Last Name</th>
<th>Parent 2 First Name</th>
<th>Parent 2 Last Name</th>
<th class="actions no-sort">Actions</th>
</tr>
</thead>
<tbody>
@foreach ($families as $family)
<tr>
<td>{{ $family->parent1_first_name }}</td>
<td>{{ $family->parent1_last_name }}</td>
<td>{{ $family->parent2_first_name }}</td>
<td>{{ $family->parent2_last_name }}</td>
<td class="actions">
<i class="fas fa-eye fa-fw" data-toggle="modal" data-target="#showFamily"
data-id="{{ $family->id }}"
data-parent1_first_name="{{ $family->parent1_first_name }}"
data-parent1_last_name="{{ $family->parent1_last_name }}"
data-parent2_first_name="{{ $family->parent2_first_name }}"
data-parent2_last_name="{{ $family->parent2_last_name }}"
data-phone="{{ $family->phone }}"
data-email="{{ $family->email }}"
data-address="{{ $family->address }}"
data-city="{{ $family->city }}"
data-state="{{ $family->state }}"
data-zip="{{ $family->zip }}"
data-notes="{{ $family->notes }}"
@if ($family->students->count())
data-students="{{ $family->students->sortBy('first_name') }}"
@endif
></i>
<i class="fas fa-pen fa-fw" data-toggle="modal" data-target="#editTechnique"
data-id="{{ $family->id }}"
data-parent1_first_name="{{ $family->parent1_first_name }}"
data-parent1_last_name="{{ $family->parent1_last_name }}"
data-parent2_first_name="{{ $family->parent2_first_name }}"
data-parent2_last_name="{{ $family->parent2_last_name }}"
data-phone="{{ $family->phone }}"
data-email="{{ $family->email }}"
data-address="{{ $family->address }}"
data-city="{{ $family->city }}"
data-state="{{ $family->state }}"
data-zip="{{ $family->zip }}"
data-notes="{{ $family->notes }}"></i>
<i class="fas fa-trash fa-fw" data-toggle="modal" data-target="#deleteTechnique"
data-id="{{ $family->id }}"></i>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
DATATABLE JS
// DataTables
$('.dt').DataTable({
responsive: true,
autoWidth: false,
columnDefs: [{
targets: 'no-sort',
orderable: false
}]
});
JS REQUIREMENTS
require('bootstrap');
require('@coreui/coreui');
require( 'datatables.net-bs4' )();
require( 'datatables.net-responsive-bs4' )();
SCSS INCLUDES
// DataTables
@import '~datatables.net-bs4/css/dataTables.bootstrap4.min.css';
@import '~datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css';
PACKAGE.JSON DEPENDENCIES
"dependencies": {
"@coreui/coreui": "^2.1.4",
"datatables.net": "^1.10.19",
"datatables.net-bs4": "^1.10.19",
"datatables.net-responsive-bs4": "^2.2.3",
"perfect-scrollbar": "^1.4.0",
"simple-line-icons": "^2.4.1"
}
Let me know if I missed anything that might help get this working. Thanks!
Answers
Is it in a responsive container? Could you give a link to a test case showing the issue please? Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Allan
Try using version 2.0.0 of dataTables.responsive.min.js. All versions above this one are bugged.
I warned DataTables group about it, many months ago, but they did nothing about it!
https://www.dropbox.com/s/j1k4fe3ajymru49/dataTables.responsive.min-2.0.0.zip?dl=0