Print buttons not showing

Antonio102 · June 2018

Hi! I'm trying to display print buttons on index.php page. I have this js code just before the </body> tag

$(document).ready(function() 
 {
 $('#bootstrap-data-table-export').DataTable();
dom: 'Bfrtip',
 buttons: ['copyHtml5','excelHtml5','csvHtml5','pdfHtml5']
 } );

and all the js and css file in two separate folders, loaded into <head> by this php code

foreach (glob("assets/css/lib/datatable/*.css") as $css)
{
echo "<link rel=\"stylesheet\" href=\"$css\">\n";
}

foreach (glob("assets/js/lib/data-table/*.js") as $js) 
{
echo "<script type=\"text/javascript\" src=\"$js\"></script>\n";
}

Now, not only i can't see the print buttons, but even the "Show X results" and search bar are gone.

How can i solve this?

kthorngren · June 2018

You need to put your options inside the Datatables function to pass as parameters, like this:

 $('#bootstrap-data-table-export').DataTable({
   dom: 'Bfrtip',
   buttons: ['copyHtml5','excelHtml5','csvHtml5','pdfHtml5']
);

You are probably getting a syntax error in your browser's console.

Not sure using the loops to load the CSS and JS include files is the best option. There is a certain order they need to be loaded and I wouldn't count on them being loaded in the correct order this way.

If you continue to have problems then we need to see the resulting CSS in JS includes and your updated Datatables JS code.

Kevin

Antonio102 · June 2018

Ok, I managed to show the buttons.

Only one question:

Why if i add the print button like this

['print','copyHtml5','excelHtml5','csvHtml5','pdfHtml5']

all the buttons disappear?

kthorngren · June 2018

Looks like you are adding the print button. Did you also include the print JS
buttons.print.min.js?

Kevin

Antonio102 · June 2018

Yes, it is included.

If i set the code to display the print button only there's no problem.

The issue is where i try to display it along the html5 export buttons.

allan · June 2018

There should be an error in the console stating what is going wrong. My guess is as Kevin says, the print button definition hasn't been included.

Allan

Antonio102 · June 2018

Fixed it up, only issue now is with ColVis. I click on the column name but nothing happens. No error in the JS Console.

This is the actual code

$(document).ready(function() {
    $('#bootstrap-data-table').DataTable( {
        dom: 'lBfrtip',
        buttons: [
            { extend: 'print', exportOptions: 
                { columns: ':visible' }
            },
            { extend: 'copy', exportOptions: 
                 { columns: [ 0, ':visible' ] }
            },
            { extend: 'excel', exportOptions: 
                 { columns: ':visible' }
            },
            { extend: 'pdf', exportOptions: 
                  { columns: [ 0, 1, 2, 3, 4 ] }
            },
            { extend: 'colvis',   postfixButtons: [ 'colvisRestore' ] }
           ],
          language: {
              buttons: {
                  print: 'Stampa',
                  copy: 'Copia',
                  colvis: 'Colonne da visualizzare'
               } //buttons
           }, //language
           "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
        });
    });

colin · June 2018

Hi @Antonio102 ,

I just tried it here, with your settings, and it all worked as expected. Could you check the definitions against yours, and see if there's a version or missing file issue.

Cheers,

Colin

Print buttons not showing

Print buttons not showing

Answers

Howdy, Stranger!

Categories

DataTables

Print buttons not showing

Print buttons not showing

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables