Question

How do i print the above table data in two pages based on group types seperately? Can this be achieved with window.print and some css and javascript tweaks?

Any idea/suggestion are welcome.

Answer 1

So, when the table switches from a group of “Teddy Bear” to “Baby Bear” you want this on a new page?

If so, then structure the table with separate <thead> and <tbody> sections, like so:

<table>
    <thead>
        <tr class="pageBreak">
            <th>Child</th>
            <th>Group</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Alberto</td>
            <td>Teddy Bear</td>
        </tr>
        <tr>
            <td>Guadalupe</td>
            <td>Teddy Bear</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td>Carlos</td>
            <td>Baby Bear</td>
        </tr>
        <tr>
            <td>Oswaldo</td>
            <td>Baby Bear</td>
        </tr>
    </tbody>
</table>

Notice that different groups are in different <tbody>s.

Then you can use CSS like:

tbody {page-break-after:always;}

And the groups will print on separate pages, plus in most browsers, the headers will be repeated.

Print or print preview this example at jsBin.