Datatables print - Insert page break after/before table row

Ledniczky Róbert

Is itt possible to add page break after a specific table row? I tried
<style>
@media print {tr.page-break { display: block; page-break-before: always; } }
</style>

with no luck.

Thank you for your help!

Ledniczky Róbert

A little clarification:

This is working (one line to every page)

<style> table.dataTable tbody tr { page-break-after: always; } </style>

but if I use it as a class and add to a row:

<style> table.dataTable tbody tr.page-break { page-break-after: always; } </style>

this is not working..

colin

Would you be able to create a test case for this one, please, as I'm not clear where that code above would fit. 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.

Colin

Ledniczky Róbert

Hi, thank you for the response!

Example 1 (working)

Example 2: (not working)

Examining the problem a bit more, I can see multiple problems.

First: looking at datatbles.print.js i found, that it's not considering class information on table row, when it prepares the table for printing.

Second: the css command i use to create page-break (page-break-after/before: always) works in firefox, but not working in chrome (or edge).

So even if there is a way to process css class information on <tr> element for printing, there should be a reliable method to create page-breaks in html.

allan

To my mind this is something the browser should be doing - we supply it with an HTML table which has a thead, tbody and tfoot. For tht it can calculate where the breaks should be and show the header and footer on each page.

You could use the customize callback to add classes on to every nth row - but you don't know what size of paper the user is going to be printing on (A4, A5, US Letter), so how would you know where to put your page-break class?

Allan

Ledniczky Róbert

In my scenario, a have a column starting with a value and goes on with the same value for a while, then the value changes.
When this value changes, there shoud be a page-break, so in this case paper size is not important, the css class depends on the column value.

allan

I'm with you now - thanks for the explanation. In that case, using the customize callback for the print button would be the way to do it. Loop over the generated table's rows, inserting the class where needed.

Regards,
Allan

Ledniczky Róbert

Yes, customize is the way, but unfortunately as I said, I haven't found any cross-browser way (actually any working solution in chrome based browsers) to force a page-break

Of corse it's not about datatables, which i think is great!
But if anyone knows a solution, I would appreciate.

Thank you!