Question 35543 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Datatables, export buttons not showing with ajax response – Jquery

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.

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    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.


  2. 0

    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

    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search