Having trouble with creating a table and printing the data in a specific structure. The format should be:
Title Data Sum
The challenge is to ensure that the title does not end up at the bottom of the page, and the sum does not start at the top of the page when printed. To overcome this issue, I tried using HTML tables with Divs and set sizes in millimeters. However, I ran into problems calculating when the page breaks because the height varies on different computers.
Below is the JavaScript code I used for calculation and handling page breaks:
$(document).ready(function(){
var mydiv ='<div class="page-break"></div>';
var i=0;
var h = px2cm($("#myinfo").last().height())*10;
var limit=297;
var g =0;
$('#content div.ptr').each(function(){
g=0;
h = h + px2cm($(this).height())*10;
var nexth=px2cm($(this).next().height())*10;
if(h>=limit-nexth)
{
if($(this).hasClass("ptrtitle")){
$(this).before(mydiv);
h = px2cm($(this).height())*10;
i++;
g=1;
}else{
if(String($(this).next().attr("class"))==="ptr ptrsum"){
if($(this).prev().hasClass("ptrtitle"))
{
$(this).prev().before(mydiv);
h = px2cm($(this).height()+$(this).prev().height())*10;
}else{
$(this).before(mydiv);
h = px2cm($(this).height())*10;
}
//h=0;
i++;
g=1;
}else{
$(this).after(mydiv);
h=0;i++;
}
}
}
});
});
function px2cm(px) {
var d = $("<div/>").css({ position: 'absolute', top : '-1000cm', left : '-1000cm', height : '1000cm', width : '1000cm' }).appendTo('body');
var px_per_cm = d.height() / 1000;
d.remove();
return px / px_per_cm;
}
Setting limit=297 (for A4 height) works correctly on some computers but not all. On certain devices, it prints 40 rows on one page while on others, some rows spill over to the next printed page.
Any suggestions on how I can improve the consistency of printing across all computers?