Page breaks in looped results table

aspless · January 23rd, 2009, 09:24 AM

Chaps,

Many moons ago i was discussing with Mat how to implement page breaks in looped tables and even with all the good advice i never quite accomplished it.

I know cleaver asp chaps out there have done this many i times but my shove stick in hole approach has only humoured me with the varying miss layed out tables letting me know quite how little a grasp i have obtained!!

Now with an optomistic few moons later i am hoping with my additional 25watt light bulb to try again!!

So my logic plus light bulb tells me that i could use an AbsolutePosition check in the loop to create a new table and page break after say 5 rows.. Great unless row five ends up being 500px heigh.

The honest answer is i am a tad stumped!

As a result now using the prod stick to scratch head and wishing i was ten years younger and had a degree in computer science!!

Apologies for no code examples but trying to start from scratch here..

Any suggestions welcome..

Cheers

Aspless

Old Pedant · January 23rd, 2009, 04:15 PM

And what, pray tell, is a "page break"???

It's a meaningless concept in HTML, where a "page" can be 30 pixels high or 30,000 pixels high.

So I have to assume you mean a page break that occurs only when printing the HTML page, no??

And the generic answer to that is pretty easy:

First, you can have STYLEs that are specific to ONLY the printed version of a page. So, for example, this pair of styles I have on one of my pages. The font size changes for the printed version and many elements (e.g., <FORM> fields) are removed in the printed version:

Code:

<STYLE>
@media SCREEN {
    BODY { font-size: 12pt; }
    TD { font-size: 12pt; }
    .screenonly { display: inline }
    INPUT { font-size: 10pt; width: 78; }
    INPUT.mem { font-size: 10pt; background-color: pink; width: 78; }
    TABLE { width: 980; }
    H5 { display: none; }
    }
@media PRINT {
    BODY { font-size: 8pt; }
    TD { font-size: 8pt; }
    .screenonly { display: none }
    INPUT { visibility: hidden; font-size: 8pt; width: 60; }
    INPUT.mem { visibility: visible; background-color: pink; font-size: 8pt; width: 60; }
    TABLE { width: 900; }
    H5 { page-break-before: always; font-family: arial, sans-serif; font-size: 10pt; }
    }
</STYLE>

So in my HTML I can always use something like <span class="screenonly">xxxx</span> to suppress "xxxx" on the printed version. And then I can use <h5>page 2</h5> where I want a page break in the printed version but it won't appear at all in the screen version.

NOW...what do you do about content that varies in size??? That is, if you are dumping (say) text to a <DIV> and the text might be of various sizes or content or contain embedded stuff? How can you calculate where the page break should be?? That's a lot tougher and is somewhat browser-dependent. The above technique works best when you are able to tightly control the size of your content.

aspless · January 23rd, 2009, 04:33 PM

Thanks Old Pedant,

As you have correctly assumed i was talking about print page breaks.

The below examples will be very usefull as i have not come across @media.

Yes the issue is with dynamic content with varying numbers of rows and row txt content.

Thought ..although distant!

One way although probably a fair bit of code to produce could be to count the Characters in each primary txt field and calculate the height based upon Character count.

Then produce a new table after a determined table length.

I'm sure there are still more elegant approaches but none that come to mind.

Cheers

Aspless

Old Pedant · January 23rd, 2009, 04:57 PM

You *could* put a <h5> or equivalent before EVERY "row" of output. Then you use JavaScript to go calulate the number of pixels from the last <h5> to the current one. If you see that the row would slop over to the next printed page, you'd than change the style of that <h5> to add the page-break-before.

Come to think of it, you might do this by something like this:

Code:

<style>
 tr#PAGE { display: none; }
</style>

and then 

<tr ID="PAGE"><td colspan=xxx></td></tr>

Then, when you know you are printing the page, you just do:

Code:

var lastpage = 0;
pagenum = 1;

var rows = document.getElementByTagName("tr");
for ( r = 0; r < rows.length; ++r )
{
    var row = rows[r];
    if ( row.id = "PAGE" )
    {
         var pixels = ... get number of pixels from top of page ...
         if ( pixels - lastpage >= xxxx )
         {
               row.style.display = "block";
               row style.pageBreakBefore = "always";
               row.getElementsByTagName("td")[0].innerHTML = "page " + ( ++pagenum );
               lastpage = pixels;
         }
    }
}

I'm sure that code won't work exactly "as-is", but you should be able to play with it. As I said, counting the pixels is likely to be different in different browsers.

aspless · January 23rd, 2009, 05:05 PM

Thanks Old Pedant,

I wondered if javascript would play a part.

Will have a try.

Cheers

Aspless