Customizing layout format of print

Patrick17

Hello guys. First of all, I know this is already in the manuals and examples but I tried most of them and it doesn't work.

I wanted to put a header and a footer to my print layout. Here's my sample code

$(document).ready(function() {

    $('#reportattendance').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            {
                extend: 'print',
                customize: function ( win ) {
                    $(win.document.body)
                        .css( 'font-size', '10pt' )
                        .prepend(
                            '<img src="layouts/eclipse_logo.png"/>'
                        );
 
                    $(win.document.body).find( 'table' )
                        .addClass( 'compact' )
                        .css( 'font-size', 'inherit' )
                        .addClass('display')
                        .css( 'background-color', 'blue');
                }
            }
        ]
    } );
} );

My print format is still the same. I placed this code on the same php page where my table is (reportattendance table). I also tried placing this at the plugin file buttons.print.min.js

$(function () {
    $('.js-basic-example').DataTable({
        responsive: true
    });

    $('.js-exportable').DataTable({
        dom: 'Bfrtip',
        responsive: true,
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ]
    });
});

No luck. There are times when there's an error saying reinitialised or something and all buttons are gone except the print. I also got an instance where I applied the css changes to the layout but when the print interface comes out it is still the same.

Any help would be greatly appreciated! Thanks guys.