How to highlight some specific rows on the print layout of jquery datatable?

im_nazmul

I want to highlight specific rows while printing data from the jquery data table. I added a class to those rows by createdRow and added some CSS style to that class. Now I want to keep that styling on those rows while printing. The code I've used to add class

"createdRow": function (row, data, dataIndex) {
    var date = new Date(data.dateOfReg);
    var days = datediff(date, new Date());

    if (days >= 30 && parseInt(data.received) < 2000 && parseInt(data.payment) >= 2000) {
       $(row).addClass('d-flag');
    }    
}

In the image, you can see some rows have a background color. I just want to keep that while printing data.

allan

Hi,

You need to use the customize callback of the print button. With that you can inject styles or anything else for the print document. See also this example for how to use the customize callback.

Allan

im_nazmul

Hello Allan,
On print layout all classes were removed and there's only raw css. How can i apply styles using this callback function?
Thank you.

colin

This example here changes the background colour red on the print, you'll need to do something like that. If the print layout is removing the styles, that'll be an option on the print dialogue - for me, there's a checkbox called "background graphics" that enables the colour, see here:

Colin

im_nazmul

Hello Colin,
In order to color those rows, I need to select them first. You can see I'm using a condition at createdRow to archive that. How can I do the same on customize callback function?
Thank you.

allan

You'd need to select them using DOM methods. DataTables itself isn't running in the target window, it is just a plain table. So you would need to do something like:

win.document.querySelectorAll('tbody tr') ...

It isn't ideal I know, but that's currently the way it needs to be done.

Allan

im_nazmul

Hello Allan,
I know I can select rows this way but this will select all rows. If you look at the condition I want to select some specific rows, not all rows.
Thank you for your kind concern.

kthorngren

Looks like you are adding the class d-flag to the selected rows. does something like this work?

win.document.querySelectorAll('tbody tr.d-flag') ...

Kevin

im_nazmul

Hello Kevin
No. Because there is no class on the print layout.
Thank you

kthorngren

I guess thats right - should read what Allan says closer

Sounds like you will need to loop through all the rows and do your data comparisons similar to the createdRow. Maybe something like this:
http://live.datatables.net/lorozuma/1/edit

Kevin

im_nazmul

Hello Kevin,
Thanks for pointing me directly to what I'm not seeing. I have a question Is it possible to select a column by name instead of by index ('td:eq(2)')?
Thank you so much

kthorngren

You are limited by the jQuery selectors that are available for the generated HTML of the print preview.

If you really wanted to you could use column().index() with the column-selector of {string}:name to get the index by name. You can then use this in the :eq() selector.

Kevin

im_nazmul

Thank you so much for your help Kevin

im_nazmul

I've got the index of those columns by this method.

customize: function (win) {
    var selector = [];

    $(win.document.body).find('table thead th').each(function (index) {
        selector[index] = $(this).text();
    });

    var dorIndex = 'td:eq(' + selector.indexOf("Admission Date") + ')';
    var payIndex = 'td:eq(' + selector.indexOf("Total Payment")  + ')';
    var recIndex = 'td:eq(' + selector.indexOf("Total Received") + ')';
});

and that's well worked for me. Is there any suggestion that makes this code more efficient?

Thank You