Reputation: 49
On some of my datatables doesn't show the sorting and search. The red boxes is what I want to display but I cant get them showing u on some of my tables. The datatables are exactly the same, I've copied the code but nothing changed. So I'm asking if someone has a solution for me?
Below you will see some of my javascript and html code:
--- javascript ---
$("#dataTablesFull, #dataTablesFull2, #dataTablesFull3, #dataTablesFull4").dataTable( {
"pageLength": <?php echo getConfigValue("table_records"); ?>,
"dom": '<"top"f>rt<"bottom"><"row dt-margin"<"col-md-6"i><"col-md-6"p><"col-md-12"B>><"clear">',
"buttons": [ 'copy', 'csv', 'excel', 'pdf', 'print' ],
"stateSave": true,
"fixedHeader": false,
"oLanguage": {
"sSearch": "",
"sEmptyTable": "<?php _e('Oops! Er is niets om weer te geven.'); ?>",
"sZeroRecords": "<?php _e('Niets gevonden'); ?>",
"sInfo": "<?php _e('Weergeven van: '); ?> _START_ <?php _e('tot'); ?> _END_ <?php _e('van'); ?> _TOTAL_ <?php _e('records.'); ?>",
"sInfoEmpty": "",
"oPaginate": {
"sNext": "<?php _e('Volgende'); ?>",
"sPrevious": "<?php _e('Vorige'); ?>",
"sFirst": "<?php _e('Eerste pagina'); ?>",
"sLast": "<?php _e('Laatste pagina'); ?>"
}
},
"columnDefs": [ { "orderable": false, "targets": -1 } ] }
);
--- html ---
<div class="table-responsive">
<table id="dataTablesFull" class="table table-striped">
<thead>
<tr>
<th>Naam</th>
<th>E-mail</th>
<th>Antwoord</th>
<th>Status</th>
<th></th>
</tr>
</thead>
<tbody>
<?php foreach ($contacts as $contact) { ?>
<tr>
<td>
<?php echo $name; ?>
</td>
<td>
<?php echo $email; ?>
</td>
<td>
<?php
if(empty($answer)) {
echo " -";
}
if(!empty($answer)) {
echo $answer;
}
?>
</td>
<td>
<?php
if($contact['status'] == 0) {
echo "Verzonden";
}
if($contact['status'] == 1) {
echo "Beantwoord";
}
?>
</td>
<td>
<div class='pull-right btn-group'>
<a href="#" onClick='#' class='btn btn-info btn-flat btn-sm'><i class='fa fa-eye'></i></a>
<a href="#" onClick='#' class='btn btn-danger btn-flat btn-sm'><i class='fa fa-trash-o'></i></a>
</div>
</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
Upvotes: 0
Views: 86
Reputation: 920
For the buttons to appear you need "B" on the "dom" option (i.e. Buttons)
For the search bar to appear you need "f" in the "dom" option (i.e. filter)
For pagination you need "p" in the "dom" option. (i.e. pagination)
i.e.
$('#myTable').DataTable( {
dom: 'Bfrtip',
buttons: [
'copy', 'excel', 'pdf'
]
} );
Refer to https://datatables.net/reference/option/dom and https://datatables.net/extensions/buttons/
You seem to have them there but with extra styling applied, it could it be the case that the stylesheet that is being referred to is not loading (check via browser dev tools)
Upvotes: 1