DataTable jQuery Print Custom Elements

Question

How can I print custom elements using Print button from DataTable?

Here is an example: JSFIDDLE

I want to when you press "Print", this code go to print too:

<div id="PRINT_HERE_TOO" class="test">
   <h1>
      Print Here Too!
   </h1>
</div>

Was I clear? Thanks!

Answer 1

<script>
    $(document).ready(function () {
        $('.dataTables-example').DataTable({
            pageLength: 10,
            responsive: true,
            dom: '<"html5buttons"B>lTfgitp',
            buttons: [
                { extend: 'copy' },
                { extend: 'csv' },
                { extend: 'excel', title: 'MonthlyReport' },
                { extend: 'pdf', title: 'MonthlyReport' },

                {
                    extend: 'print',
                    customize: function (win) {
                        $(win.document.body).addClass('white-bg');
                        $(win.document.body).css('font-size', '14px');

                        $(win.document.body).find('table')
                                .addClass('compact')
                                .css('font-size', '14px')
                                .css('color','black') ;
                    }
                }
            ]

        });

    });

</script>

Answer 2

use this as JavaScript in you code and see how can be customized to your needs.

$(document).ready(function() {
    $('#example').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            {
                extend: 'print',
                customize: function ( win ) {
                    $(win.document.body)
                        .css( 'font-size', '10pt' )
                        .prepend(
                            '<div>xxxxxxxxxxxxxxxxxxxxxxxx</div><img src="http://datatables.net/media/images/logo-fade.png" style="position:absolute; top:0; left:0;" />'
                        );

                    $(win.document.body).find( 'table' )
                        .addClass( 'compact' )
                        .css( 'font-size', 'inherit' );
                }
            }
        ]
    } );
} );