# Optimizing pagination of HTML tables

I'd like to share my implementation to you to confirm if it's a correct way to solve my problem. I have a list of products which have an attributes table and a description table (both in html_encoded strings). Every product starts at a new print-page using page break. When the attributes and description tables don't fit in one page I want to print the description in the next page.

My solution is to print the attributes table and then print the description div twice: once in the same page with the attributes and once at the next page using a page break; After the page has loaded using JavaScript, I measure the height of both attributes+description and if that is higher than 800 pixels (which means that two pages will be needed) I hide the first description. If their height is lower than 800 pixels (which means they can fit in the same page) I hide the second one.

(I know for certain that neither of the two tables will exceed one page by itself)

Is this a solid solution or are there possible cases in which it will lead to a big mess?

<script>
function measure(){
$total_count=document.getElementById("total_product_count").value; for(var i = 1; i <=$total_count; i++){
$description_id='description['+i+']';$second_description_id='description['+i+']_second';
$attributes_id='attributes['+i+']';$combined_height = document.getElementById($description_id).clientHeight + document.getElementById($attributes_id).clientHeight;

if($combined_height>800){ document.getElementById($description_id).style.display = 'none';
}
else{
document.getElementById($second_description_id).style.display = 'none'; } } } </script <body onload="measure()"> . . . <input id="total_product_count" type="hidden" value="<?php echo$total_product_count; ?>" />

<?php foreach ($products as$product) { ?>
<div>...small image + title....<div/>
<div  class="attribute" id="attributes[<?php echo $product['product_count']; ?>]" ><?php echo$product['attributes']; ?></div>
<br/>
<!--show the first description in the same page as attributes -->
<div id="description[<?php echo $product['product_count']; ?>]" class="tab-content"> <?php echo$product['description']; ?></div>
<div id="second_description[<?php echo product['product_count']; ?>]" class="tab-content"> <!-- show the second description at the next page --> <p style="page-break-after: always; text-align: center;"></p> <?php echoproduct['description']; ?>
</div>
<?php }?>


This isn't an actual solution to your problem, but I noticed that you aren't using var to declare your JavaScript variables. Doing so automatically declares them in the global scope, which is a bad idea as a general rule of thumb and can quickly lead to unpredictable behavior. Declaring variables should be done like var myvar = myvalue:

<script>
function measure(){
var $total_count=document.getElementById("total_product_count").value; for(var i = 1; i <=$total_count; i++){
var $description_id='description['+i+']'; var$second_description_id='description['+i+']_second';
var $attributes_id='attributes['+i+']';$combined_height = document.getElementById($description_id).clientHeight + document.getElementById($attributes_id).clientHeight;

if($combined_height>800){ document.getElementById($description_id).style.display = 'none';
}
else{
document.getElementById(\$second_description_id).style.display = 'none';
}

}
}
</script>

...