Buttons not appearing

x2noe

I was able to replicate the example provided in my dev environment but when I use the code on my live site it does not render the buttons for PDF, CSV, Excel. Trying to export a list of transaction
these are the links provided:

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.4.2/css/buttons.dataTables.min.css">
<script type="text/javascript" src= "https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src= "https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.print.min.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
    $('#content').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ]
    } );
} );
    </script>

Nothing renders, what am I missing ?

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

I don't immediately see anything wrong with that, and your code runs without issue here. I'd need a link to a test case showing the issue please.

Allan

x2noe

so this is the code I have that the buttons are not working.

<div id="content">

<?php if(count($this->transactions)): ?>
    <div class="table-responsive" id="aside">
        <table class="table" id="content" border="0" cellpaddding="0" cellspacing="0">
        <thead>
          <tr>
            <th>X2_Pay_Transaction</th>
            <th>Invoice Number</th>
            <th>Date</th>
            <th>Currency</th>
            <th>Amount</th>
            <th>Balance Total</th>
            <th>Payer</th>
            <th>Beneficiary</th>
            <th>Description</th>
          </tr>
        </thead>
        <tbody>
  
            <?php foreach($this->transactions as $transaction): ?>
                    <tr>
                        <?php foreach($this->headers as $header): ?>
                            <td><?= $transaction[$header] ?></td>
                        <?php endforeach ?>
                    </tr>
        <?php endforeach ?>
        </table>
    </div>
<?php endif ?>
</div>

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

MrNazgul

Allan debugs and answers a lot of questions here every day. You can make his job so much easier and efficient by formatting and organizing your posts. The UI here has a link to a markdown guide and a preview mode.

Also, posting a link to an existing reference where the behavior can be seen or creating a code fiddle somewhere showcasing the issue can speed up the process dramatically. It's far quicker to debug a minimal working case rather than trying to assemble everyone's code and fill in the gaps.

Allan puts in a lot of effort to help as many people as he can. It helps everyone if you put in the effort on your side so the process can be more efficient and he will be able to get to more issues this way. It will prompt other developers to also be more willing to help you. I know I will look at helping someone who's put forth the effort and provided a minimal test case while passing by posts where it hasn't been done.

x2noe

my apologizes I will get a test case going and provide the information

allan

Thanks, a test case would be great - I don't immediately see anything wrong with the HTML / PHP above, although my guess would be that the columns in the body don't match the header - but its impossible to say without a test case.

@MrNazgul - Thanks for your kind words. Much appreciated .

Allan

tangerine

@MrNazgul : Excellent post.

Odair Pianta

This problem also occurs here.

<html>
<head>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.4.2/css/buttons.dataTables.min.css"/>

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.flash.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#tabela').DataTable({
                dom: 'Bfrtip',
                buttons: [
                    'csv', 'excel', 'pdf'
                ]
            });

        });
    </script>
</head>
<body>
        <table id='tabela'>
            <thead>
                <tr>
                    <td>Nome</td>
                    <td>CPF ou CNPJ</td>
                    <td>Status</td>
                    <td>Consultas</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Nome</td>
                    <td>123</td>
                    <td>Atendido</td>
                    <td>17</td>
                </tr>
                <tr>
                    <td>Nome</td>
                    <td>123</td>
                    <td>Erro</td>
                    <td>6</td>
                </tr>
                <tr>
                    <td>Nome 2</td>
                    <td>1234</td>
                    <td>Atendido</td>
                    <td>43</td>
                </tr>
                <tr>
                    <td>Nome 2</td>
                    <td>1234</td>
                    <td>Erro</td>
                    <td>29</td>
                </tr>            
            </tbody>
        </table>
</body>
</html>

Link for page: https://mercatoonline.com.br/projetos/espelho/admin/relatorio_mes2.html

What is wrong?

Thanks for helps.

Odair Pianta

Hi,

i solved the problem. Alter de include for

<link rel="stylesheet" type="text/css" href="datatables/DataTables-1.10.16/css/dataTables.bootstrap4.min.css"/>
<link rel="stylesheet" type="text/css" href="datatables/Buttons-1.4.2/css/buttons.bootstrap4.min.css"/>
 
<script type="text/javascript" src="datatables/JSZip-2.5.0/jszip.min.js"></script>
<script type="text/javascript" src="datatables/pdfmake-0.1.32/pdfmake.min.js"></script>
<script type="text/javascript" src="datatables/pdfmake-0.1.32/vfs_fonts.js"></script>
<script type="text/javascript" src="datatables/DataTables-1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="datatables/DataTables-1.10.16/js/dataTables.bootstrap4.min.js"></script>
<script type="text/javascript" src="datatables/Buttons-1.4.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="datatables/Buttons-1.4.2/js/buttons.bootstrap4.min.js"></script>
<script type="text/javascript" src="datatables/Buttons-1.4.2/js/buttons.flash.min.js"></script>
<script type="text/javascript" src="datatables/Buttons-1.4.2/js/buttons.html5.min.js"></script>