CODEWITHSUNDEEP
javascriptjquerydatatables
Kailash PK
Kailash PK

Reputation: 71

How to add data export buttons in datatables

I have generated a datatable with some data using this piece of code to initialize the datatable

$("#myid").DataTable(
            {
                    columnDefs:
                    [
                      { orderable: false, targets: -1}
                    ],
              "pageLength":10
            });

I have seen the documentation to add button in data-tables .But when i try to merge with what i have done it's not displaying the export buttons as shown in documentation.

What i have done 

$("#myid").DataTable(
            {
                    columnDefs:
                    [
                      { orderable: false, targets: -1}
                    ],
              "pageLength":10,
              "dom": 'Bfrtip',
              "buttons": [
                    'excelHtml5',
                ]
            });

Is there anything else i'm missing.Any help would be appreciated.Thanks..

Upvotes: 0

Views: 8156

Answers (1)

Kishan
Kishan

Reputation: 251

Make sure your have imported the Data Table button extension JS file in your html page.

Check this official Link - https://datatables.net/extensions/buttons/

Then you can use the below code:

$('#myTable').DataTable( {
    buttons: [
        'copy', 'excel', 'pdf'
    ]
} );

In order to use HTML5 Export Buttons, you need to import JSZip and PDFMake

The CDN for Buttons is:

JS - https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js

CSS - https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css

Below is the snippet of one of my html page that uses DataTable with Buttons for exporting:

<script type="text/javascript" src="assets/js/plugins/tables/datatables/datatables.min.js"></script>
        <script type="text/javascript" src="assets/js/plugins/tables/datatables/extensions/col_reorder.min.js"></script>
        <script type="text/javascript" src="assets/js/plugins/tables/datatables/extensions/buttons.min.js"></script>
        <script type="text/javascript" src="assets/js/plugins/tables/datatables/extensions/jszip/jszip.min.js"></script>
        <script type="text/javascript" src="assets/js/plugins/tables/datatables/extensions/pdfmake/pdfmake.min.js"></script>

Upvotes: 2

Related Questions