Jason van den Heuvel
Jason van den Heuvel

Reputation: 49

Datatables no sorting or search on some of my tables

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?

Example

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

Answers (1)

mkane
mkane

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

Related Questions