CODEWITHSUNDEEP
phpjquerydatatables
Mussa Mansah
Mussa Mansah

Reputation: 1

Datatables, export buttons not showing with ajax response

I have a problem with export buttons on datatables. I build a table with datatables and the table is loading after chosing a data from select field in a form. the problem is the export buttons (Excel, pdf) don't showing.

libraries


<script src="https://code.jquery.com/jquery-3.6.3.js" integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/js/bootstrap-select.min.js" integrity="sha512-yDlE7vpGDP7o2eftkCiPZ+yuUyEcaBwoJoIhdXv71KZWugFqEphIS3PU60lEkFaz8RxaVsMpSvQxMBaKVwA5xg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- (Optional) Latest compiled and minified JavaScript translation files -->
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.13.1/b-2.3.3/b-html5-2.3.3/datatables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.3.2/js/dataTables.buttons.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.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.3.2/js/buttons.html5.min.js"></script>
<script type='text/javascript' src="https://cdn.datatables.net/buttons/2.3.2/js/buttons.print.min.js"></script>

HTML

form for sending filters

<form method="POST" onsubmit="return false" id="allTiming" action="">
   <div class="row">
     <div class="col-1">
      <label class="col-form-label" for="date_debut">Date début</label>
     </div>
     <div class="col">
      <input class="form-control" id="date_emb" name="date_debut" type="date"  placeholder="Date debut" aria-label="Date debut">
     </div>
     <div class="col-1">
       <label class="col-form-label" for="date_debut">Date fin</label>
     </div>
     <div class="col">
       <input class="form-control" id="date_emb" name="date_fin" type="date"  placeholder="Date fin" aria-label="Date fin">
     </div>

     <div class="col">
      <button type="submit" id="submitAllHist" name="btn_rechercher" class="btn btn-block btn-primary">Rechercher</button>
     </div>
   </div>
</form>

Table

<table id="allAffect" class="table table-bordered table-striped datatable table table-resposive">
    <thead>
    <tr style="font-size:12px;background: #716aca;color:white;">
        <th>Matricule</th>
        <th>Nom & Prenoms</th>
        <th>Contat</th>
        <th>Activité</th>
        <th>Superviseur</th>
        <th>Vehicule</th>
        <th>Date affectation</th>
    </tr>
    </thead>
    <tbody id="listDyn">
    </tbody>
</table>

Datatable ith Ajax Source

$("#RiList").DataTable( {
        destroy: true,

       dom: 'Bfrtip',
        buttons: [
            'excel',
            'csv'
        ],

        ajax:{
           url: './main/treatment.php?action=list&param='+param,
           dataSrc: ''
        },

       columns: [
           {data: 'matricule'},
           {data: 'nom'},
           {data: 'contact'},
           {data: 'activite'},
           {data: 'immatriculation'},
           {data: 'date'}
       ],

    } );

I failed to show Export Buttons (CSV, Excel) when the datatable is initialize.

Upvotes: 0

Views: 836

Answers (3)

Mussa Mansah
Mussa Mansah

Reputation: 1

I got the solution.

If you are using Ajax for your datatable sources like me, you must declare the dom and the button after ajax call. it is why export buttons did not show.

Thanks to everyone.

Upvotes: 0

SelVazi
SelVazi

Reputation: 16043

Seems like you didn't include all the required Js files.

In addition of jquery.js and datatables.js, those are required for buttons copy and csv :

<script src="https://cdn.datatables.net/buttons/2.3.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.2/js/buttons.html5.min.js"></script>

Nb : orders should be respected, jquery first then datatables then buttons js files.

$(document).ready(function () {    
    $('#example').DataTable( {
        dom: 'Bfrtip',
        destroy: true,
        dom: 'Bfrtip',
        buttons: [
            'copy', 'csv'
        ]
    } );
});
<link href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/buttons/2.3.2/css/buttons.dataTables.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.2/js/buttons.html5.min.js"></script>

<body>
<table id="example">
        <thead>
            <tr>
                <th>A</th>
                <th>B</th>
                <th>X</th>
                <th>Y</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>13</td>
            </tr>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>23</td>
            </tr>
            <tr>
                <td>16.5454</td>
                <td>16.5454</td>
                <td>15</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>15</td>
                <td>16.5454</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>316.5454</td>
                <td>1</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>3</td>
            </tr>
            <tr>
                <td>16.5454</td>
                <td>16.5454</td>
                <td>15</td>
                <td>7</td>
            </tr>
            <tr>
                <td>1</td>
                <td>15</td>
                <td>16.5454</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>2</td>
                <td>10</td>
            </tr>
            <tr>
                <td>1</td>
                <td>316.5454</td>
                <td>1</td>
                <td>3</td>
            </tr>
        </tbody>
    </table>
</body>

Upvotes: 0

DimisV
DimisV

Reputation: 11

I can not add a comment, so I write an answer. I made a test and I comment (//) the dom: 'Bfrtip' as you. So the buttons don't showing. I remove the comment tags (// ) and it is ok.

Please remove the comment tags ( // ) from your code at dom: 'Bfrtip and test

Upvotes: 0

Related Questions