datatables print view doesnt maintain display formatting(CSS)

shinok

When using the datatables ->buttons.print.js -a new table is created using the exported data. However the CSS classes associated with the header or the table rows as such is not copied over. This causes the print view to loose all formatting - eg the center justification etc.

In the source file you can see below when constructing the table element - the css class is used. But the same is not done for the header, footer or table rows.

// Construct a table for printing
var html = '<table class="'+dt.table().node().className+'">';
if ( config.header ) {
            html += '<thead>'+ addRow( data.header, 'th' ) +'</thead>';
        }

        html += '<tbody>';
        for ( var i=0, ien=data.body.length ; i<ien ; i++ ) {
            html += addRow( data.body[i], 'td' );
        }
        html += '</tbody>';

        if ( config.footer ) {
            html += '<thead>'+ addRow( data.footer, 'th' ) +'</thead>';
        }

Any alternative other than overriding the entire method for print to fix this issue? I checked that even in the latest release the code is pretty much the same.

jLinux

You can customize the print display with the customize setting..

new $.fn.dataTable.Buttons( dt, {
    buttons: [
        {
            text: '<i class="fa fa-lg fa-print"></i> Print',
            customize: function ( win ) {
                // Style the body..
                $( win.document.body )
                    .addClass('asset-print-body')
                    .css( /* CSS for entire BODY here... */ )
                    .prepend( $( '<img />' )
                        .attr('src','https://sasset.io/wp-content/uploads/2015/08/sasset_logo-300x87.png')
                        .addClass('asset-print-img')
                );

                /* Style for the table */
                $( win.document.body )
                    .find( 'table' )
                    .addClass( 'compact' )
                    .css( { 
                        color: '#FF0000', 
                        margin: '20px' 
                        /* Etc CSS Styles..*/ 
                    } );
            },
            extend: 'print'
        }
    ]
} );

shinok

Hi jLinux,
This seems to be customizing the print layout.
However my requirement is to maintain the datatable formatting - ie, the alignment of text within the tables i.e. if a column is centered, i want it to show centered, if it is right justified, to show it aligned to the right etc.

jLinux

Oh, you may have to play around with the columnDefs settings to define specific display settings for specific types of Orthogonal Data

Or if any of the "formatting" is due to HTML within the table, then that may be getting stripped out by default

ciprian

I also run into this problem. Using bootstrap, I apply text-right class on some columns to align numbers to right. Here's a jsfiddle example

The web display of datatable keeps the classes I set, but any of the export buttons strip the styling from th and td.

I suggest adding a new option on the buttons to keep the styling when exporting to print / excel / pdf etc.