Print jQuery datatable in landscape mode

Programming
, , ,
1

I’m having difficulty printing a DataTable in landscape mode. Here is the code I’m using:

var table = jQuery('#dyntable_client_orders').DataTable({
    lengthChange: true,
    //responsive: false,
    buttons: ['copy', 'excel', 'pdf', 'colvis',{
            extend: 'print',
            customize: function ( win ) {
                console.log(win.styleMedia.type);
                win.styleMedia.type = 'print';
            }
        }]
});

I also tried this:

var table = jQuery('#dyntable_client_orders').DataTable({
    lengthChange: true,
    //responsive: false,
    buttons: ['copy', 'excel', 'pdf', 'colvis',{
            extend: 'print',
            orientation: 'landscape'
        }]
});
2

The correct way to print a DataTable in landscape mode using the DataTables library is to include the customize function within the extend option for the print button, and then set the @media print CSS rule to rotate the page by 90 degrees. Here is the updated code:

var table = jQuery('#dyntable_client_orders').DataTable({
    lengthChange: true,
    //responsive: false,
    buttons: ['copy', 'excel', 'pdf', 'colvis',{
            extend: 'print',
            customize: function ( win ) {
                jQuery(win.document.body)
                    .css( 'font-size', '10pt' )
                    .prepend(
                        '<style>@media print { p { font-size: 20pt; } ' +
                        '@page { size: landscape; } }</style>'
                    );
 
                jQuery(win.document.body).find( 'table' )
                    .addClass( 'compact' )
                    .css( 'font-size', 'inherit' );
            }
        }]
});