Export buttons are not appearing in Datatable

Question

I am using jQuery DataTables 1.10 and all my code is working fine. To add export functionality I refer this link. I have added all the files what is said

//code.jquery.com/jquery-1.11.3.min.js
https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js
https://cdn.datatables.net/buttons/1.0.3/js/dataTables.buttons.min.js
//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js
//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js
//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js
//cdn.datatables.net/buttons/1.0.3/js/buttons.html5.min.js
//cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css
//cdn.datatables.net/buttons/1.0.3/css/buttons.dataTables.min.css

I have downloaded these files and stored locally. So my final code is like :

 table = $(".jqueryDataTable").DataTable( {

        "initComplete": function(oSettings, json) {
              alert( 'DataTables has finished its initialisation in table.' );
              this.fnHideEmptyColumns(this);
              $('#lblReportHeader').html(reportHeader);
              $('#lblFromDate').html(fromDateHeader);
              $('#lblToDate').html(fromToHeader);
              $('#tblReportHeader').show();
            },
            "searching": false,
            "retrieve": true, 
            "destroy": true,
            "ajax": "./getReportDetails",
            "jQueryUI": true,
            "dom": 'r<"H"lf><"datatable-scroll"t><"F"ip>',
            buttons: [
                      'copyHtml5',
                      'excelHtml5',
                      'csvHtml5',
                      'pdfHtml5'
                  ],
            "fnServerParams": function ( data ) {
                newData=data;
                newData.push( { "name": "reportType", "value": reportType }, { "name": "reportSubType", "value": reportSubType}, { "name": "fromDate", "value": fromDate}, { "name": "toDate", "value": toDate});
            },
            "columns": [
                            { "mData": "username", "sTitle": "username"},
                            { "mData": "transferType", "sTitle": "transferType"},
                            { "mData": "fromAccount", "sTitle": "fromAccount"}
                ]
        } ); 

But it is not showing any export button on my UI.

What is the wrong in my code ?

Solution 1

I had the same issues where everything looked good from adding required javascript and css files to specifying "dom" value and initializing buttons array in the data table body. However, my root cause of not displaying the buttons was that I was adding one of the dependent javascripts two times and same js file was placed in two different locations inside my resources folder. As soon as I identified and remove additional duplicate js reference, the problem got resolved and I was able to see the buttons displayed and working as well.

Solution 2

Here issue is you have included required JS files but at the time of initialization, you haven't specified options for export like mentioned below:

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

You can remove the options from copy, csv, excel, pdf, print according to requirement.

You cannot change the name of button, it needs to be exact same as mentioned.