Any idea why the buttons (csv, excel, pdf, print etc) are not showing when using this code for bootstrap?
https://datatables.net/extensions/buttons/examples/styling/bootstrap4.html
I have this for styles:
<link href="//stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="//cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" rel="stylesheet">
<link href="//cdn.datatables.net/buttons/1.5.6/css/buttons.bootstrap4.min.css" rel="stylesheet">
This for scripts:
<script src="//code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script src="//cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
<script src="//cdn.datatables.net/buttons/1.5.6/js/buttons.bootstrap4.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="//cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script>
<script src="//cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script>
<script src="//cdn.datatables.net/buttons/1.5.6/js/buttons.colVis.min.js"></script>
And this JS:
$(document).ready(function(){
var table = $('#reminders').DataTable({
"lengthMenu": [[50, 100, 1000, -1], [50, 100, 1000, "All"]],
"initComplete": function(){
$("#reminders").show();
},
buttons: ['copy', 'csv', 'excel', 'pdf', 'print', 'colvis']
});
table.buttons().container().appendTo( '#example_wrapper .col-md-6:eq(0)' );
});
But the buttons are not showing... If I uncomment the dom and use Blfrtip the buttons do show, but I am curious as why the method in the example (without dom) isn't working...
Using dom
parameter
"dom": 'Blfrtip'
B
- Buttonsl
- length changing input controlf
- filtering input r
- processing display elementt
- The tablei
- Table information summary p
- pagination control Direct insertion
The selector would be #reminders_wrapper
or
table.buttons().container()
.appendTo( $('.col-md-6:eq(0)', table.table().container()) );
$(document).ready(function() {
var table = $('#reminders').DataTable({
//"dom": 'Blfrtip',
"lengthMenu": [
[50, 100, 1000, -1],
[50, 100, 1000, "All"]
],
"initComplete": function() {
$("#reminders").show();
},
"buttons": ['copy', 'csv', 'excel', 'pdf', 'print', 'colvis']
});
table.buttons().container().appendTo('#reminders_wrapper .col-md-6:eq(0)');
});
<link href="//stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="//cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" rel="stylesheet">
<link href="//cdn.datatables.net/buttons/1.5.6/css/buttons.bootstrap4.min.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script src="//cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
<script src="//cdn.datatables.net/buttons/1.5.6/js/buttons.bootstrap4.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="//cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script>
<script src="//cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script>
<script src="//cdn.datatables.net/buttons/1.5.6/js/buttons.colVis.min.js"></script>
<table id="reminders" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
</table>
I just checked, and the DOM for the wrapper is not ready yet right after the DataTable()
call. I'm using AJAX to get the data. But adding the call in the initComplete
property worked:
$(document).ready(function() {
var table = $('#reminders').DataTable({
//"dom": 'Blfrtip',
"lengthMenu": [
[50, 100, 1000, -1],
[50, 100, 1000, "All"]
],
"initComplete": function() {
table.buttons().container().appendTo('#reminders_wrapper .col-md-6:eq(0)');
$("#reminders").show();
},
"buttons": ['copy', 'csv', 'excel', 'pdf', 'print', 'colvis']
// Rest of configuration.
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With