FURKAN ILGIN
FURKAN ILGIN

Reputation: 2300

Pagination with header and footer

I want to prepare a print page which must be splitted to A4 pages. And this pages must have a header and footer.

This page increase 3 table. First table is header second table is content third table is footer.

Content must be splitted to second tables (I called it as "content table").

For example:

if content has this rows (we determine content table height=600 before)

<tr height="100"><td> row1 </td></tr>
<tr height="300"><td> row2 </td></tr>
<tr height="150"><td> row3 </td></tr>
<tr height="100"><td> row3 </td></tr>
<tr height="250"><td> row3 </td></tr>

first 3 row must be in first print page, other 2 row must be in second print page.

Like that :

First print page :

< Header table >
</ Header table >
< Context table >
  <tr height="100"><td> row1 </td></tr>
  <tr height="300"><td> row2 </td></tr>
  <tr height="150"><td> row3 </td></tr>
</ Context table >
< Footer table >
</ Footer table >

Second print page :

< Header table >
</ Header table >
< Context table >
  <tr height="100"><td> row3 </td></tr>
  <tr height="250"><td> row3 </td></tr>
</ Context table >
< Footer table >
</ Footer table >

I do it before with using jQuery height() function. I measured all the rows height and compared them with content table height (600). Then i write the print pages after split the rows with document.write function. But it is slow in long pages.

I want to do this again using another better way. How can i do that? I hope you understand my question.

Upvotes: 0

Views: 4407

Answers (1)

Slawek
Slawek

Reputation: 782

http://w3schools.com/cssref/pr_print_pageba.asp http://www.javascriptkit.com/dhtmltutors/pagebreak.shtml

Just use CSS.

For header and footer you can use position: fixed. Header: top: 0px Footer: bottom: 0px;

<div class='header'></div>
<div class='content'></div>
<div class='footer'></div>

You add margins to content that match sizes of header/footer, so it won't overwrite.

Upvotes: 1

Related Questions