I want to add excel button in my data table for excel export

Question

I am trying to add excel button by

 buttons: [
        'excel'
    ]

But it is not working

My code:

   <div class="row">
      <div class="col-9">
         <div class="card">
            <div class="card-body">
               <h4 class="mt-0 mb-3 header-title">Subscribers</h4>
               <div class="row">
                  <div class="col-sm-12">
                     <div class="table-responsive">
                        <table id="all_sub" class="table">
                           <thead class="thead-light">
                              <tr>
                                 <th>Subscriber Name</th>
                                 <th>Course Name</th>
                              </tr>
                           </thead>
                         <tbody>
                         <?php foreach($allsubscriber as $allsub):?>
                           <tr>
                           <td><?php echo $allsub->user_firstname;?></td>
                           <td><?php echo $allsub->course_title;?></td>
                         </tr>
                       <?php endforeach; ?>              
                        </tbody>
                        </table>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
    </div>
<script>
  $(document).ready( function () {
    $('#all_sub').DataTable();
    buttons: [
        'excel'
    ]
});
</script>

In the above code, I am trying to add excel but it not working. I do not know where I am wrong in my code.

Answer 1

Add this script

$(document).ready(function() {
$('#all_sub').DataTable( {
    dom: 'lBfrtip',
    buttons: [ 
        'excelHtml5', 
    ]
} );
} );

And load the below datatable libraries

https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css
https://cdn.datatables.net/buttons/1.5.6/css/buttons.dataTables.min.css

https://code.jquery.com/jquery-3.3.1.js
https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js
https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js
https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js
https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js
https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js
https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js

Answer 2

Note:- Please note - this property requires the Buttons extension for DataTables.

CSS

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.dataTables.min.css">

JS

<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script>

HTML

<table id="all_sub" class="table">
    <thead class="thead-light">
        <tr>
            <th>Subscriber Name</th>
            <th>Course Name</th>
      </tr>
    </thead>
    <tbody>
        <?php foreach($allsubscriber as $allsub):?>
        <tr>
            <td><?php echo $allsub->user_firstname;?></td>
            <td><?php echo $allsub->course_title;?></td>
        </tr>
        <?php endforeach; ?>              
    </tbody>
</table>

JQuery Script

$(document).ready(function() {
    $('#example').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ]
    } );
} );

Answer 3

you are putting buttons after calling DataTable() but it should be passed as parameter.

see below code

$('#all_sub').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            'excel'
        ]
    } );

Also, you need to include below required JS (jQuery version may vary as per datable plugin used)

https://code.jquery.com/jquery-3.3.1.js
https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js
https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js
https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js
https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js

See Datable for more information