Row background colors when Print

anant30

I am using CreatedRow callback to change the row background color (css) if certain values appears.

if (data[9] == "Pickup Only" && data[10] == 'none') { $('td', row).addClass('blue-class'); }

It shows the background color on browser but when I print it does not show colors.

I am using following print button code:

{
        extend: 'print',
        autoPrint: false,
        exportOptions: {
            columns: ':visible',
            stripHtml: true,
        },
        customize: function ( win ) {
            $(win.document.body)
                .css( 'font-size', '10pt' )
                .prepend(
                    '<img src="images/img1.jpg" style="position:absolute; opacity: 0.5; width:7% ; height:7% ; top:0; left:20;" />'
        );
             
            $(win.document.body).find( 'table' )
                .addClass( 'compact' )
                .css( 'font-size', 'inherit' );

            $(win.document.body).find('h1').css('text-align','center');
        }
}

colin

This SO thread should get you going, there's an example on that page.

Colin

anant30

I tried following the example, but it threw an error

var locationArray = table.column(1).data().toArray();
                                var statusArray = table.column(9).data().toArray();
                                var receiverArray = table.column(18).data().toArray();

                                for (var i = 0; i < statusArray.length; i++) {
                                    if (locationArray[i] != '999' && statusArray[i] == "Pickup Only" && (receiverArray[i] == '' || receiverArray[i] == null)) {
                                        console.log(locationArray[i] + statusArray[i] + receiverArray[i]);
                                        win.content[1].table.body[i][0].fillcolor = '#f08080'
                                    }
                                }

table.scantrack.js:393 Uncaught TypeError: Cannot read property 'body' of undefined
    at Object.customize (table.scantrack.js:393)
    at x.action (buttons.html5.min.js:35)
    at h (datatables.min.js:294)
    at HTMLAnchorElement.<anonymous> (datatables.min.js:295)
    at HTMLAnchorElement.dispatch (datatables.min.js:15)
    at HTMLAnchorElement.r.handle (datatables.min.js:15)

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

galcott

If the background is showing on screen but not printing, isn't this just a simple case of the fact that the default in all browsers is not to print background colors? Unless I'm missing something, the user would have to change that option in their browser. You can't control it via code.

colin

If the background is showing on screen but not printing, isn't this just a simple case of the fact that the default in all browsers is not to print background colors?

That's true if you use the browser's print functionality. However, if you're using paging, then that would only print the current page. These questions refer to using the Buttons' print functionality, which will print all rows from all pages, and would need a code-level solution,

Colin

dan.cosio

This question is a few months old and doesn't appear to be answered.. I posted
a similar issue today.
I found that using bootstrap4 is the issue.. If I use the default Datatables styling everything works as expected.. My app used Bootstrap4 so I need this to work.. My example has test code

colin

See my first reply - that points to a SO thread showing how to do it.

Colin

dan.cosio

@colin I'm using customize and format which is what you show in the SO thread.. So my approach in the customize and fomat functions incorrect in setting the color. It does work without bootstrap(ie using jqueryui). See my jsfiddle example

you can run the test there to see what I'm experiencing with both bootstrap 3 and 4in this scenerio..

The example you show is using pdfHtml5.. I'm just using the print button..

dan.cosio

@colin I did a test with pdfHtml5 and that does work.. however, using just the print bottom is where I'm having the issue.. I do have background graphics enabled in chrome..