How to print tables in different pages at a time using javascript/Jquery

Question

Here I have requirement to print html tables in different pages at a time. All these tables are inside the same division.Each page of the print should only have a single table next table should come at next page. this is my demo code

HTML

<div id="divTimeTables"><table>
<tbody>
    <tr><td>table1</td></tr>
    <tr><td><table id="tblTeacherTimeTable1"><thead><tr><th>TeacherName</th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th></tr></thead><tbody><tr><td>Monday</td><td>class&Sub2</td><td>class&Sub2</td><td>class&Sub2</td><td>class&Sub2</td><td>class&Sub2</td></tr><tr><td>Tuesday</td><td>class&Sub2</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td></tr></tbody><tr><td>WednessDay</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td></tr><tr><td>Thursday</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td></tr><tr><td>Friday</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td></tr><tr><td>Friday</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td></tr></table></td></tr>
    <tr><td></td></tr>
    <tr><td>table2</td></tr>
    <tr><td><table id="tblTeacherTimeTable2"><thead><tr><th>TeacherName</th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th></tr></thead><tbody><tr><td>Monday</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td></tr><tr><td>Tuesday</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td></tr></tbody><tr><td>WednessDay</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td></tr><tr><td>Thursday</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td></tr><tr><td>Friday</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td></tr><tr><td>Friday</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td></tr></table></td></tr>
    <tr><td></td></tr>
    </tbody>

    </table></div>
<button id="btnPrint">Print</button>

and your javascript?

madalinivascu
– madalinivascu

2015-05-07 10:21:20 +00:00
Commented May 7, 2015 at 10:21 — madalinivascu
– madalinivascu, Commented May 7, 2015 at 10:21

melvnberd · Accepted Answer · 2015-05-07 12:41:42Z

1

If your using CSS print you can just add at the bottom of your first table or anywhere you would like to set a page-break. (just an option thought)

@media print {
    .page-break {page-break-after: initial;}
}

answered May 7, 2015 at 12:41

melvnberd

3,1858 gold badges36 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

madalinivascu · Accepted Answer · 2015-05-08 03:55:02Z

Use media querys

    <section>
<table id="table1">
    <tbody>
        <tr>
            <td>table1</td>
        </tr>
        <tr>
            <td>
                <table id="tblTeacherTimeTable1">
                    <thead>
                        <tr>
                            <th>TeacherName</th>
                            <th>1</th>
                            <th>2</th>
                            <th>3</th>
                            <th>4</th>
                            <th>5</th>
                            <th>6</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Monday</td>
                            <td>class&Sub</td>
                            <td>class&Sub</td>
                            <td>class&Sub</td>
                            <td>class&Sub</td>
                            <td>class&Sub</td>
                        </tr>
                        <tr>
                            <td>Tuesday</td>
                            <td>class&Sub</td>
                            <td>class&Sub</td>
                            <td>class&Sub</td>
                            <td>class&Sub</td>
                            <td>class&Sub</td>
                        </tr>
                    </tbody>
                    <tr>
                        <td>WednessDay</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                    </tr>
                    <tr>
                        <td>Thursday</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                    </tr>
                    <tr>
                        <td>Friday</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                    </tr>
                    <tr>
                        <td>Friday</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>
    </section>
<section>
<table id="table2">
    <tbody>
        <tr>
            <td>table2</td>
        </tr>
        <tr>
            <td>
                <table id="tblTeacherTimeTable2">
                    <thead>
                        <tr>
                            <th>TeacherName</th>
                            <th>1</th>
                            <th>2</th>
                            <th>3</th>
                            <th>4</th>
                            <th>5</th>
                            <th>6</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Monday</td>
                            <td>class&Sub</td>
                            <td>class&Sub</td>
                            <td>class&Sub</td>
                            <td>class&Sub</td>
                            <td>class&Sub</td>
                        </tr>
                        <tr>
                            <td>Tuesday</td>
                            <td>class&Sub</td>
                            <td>class&Sub</td>
                            <td>class&Sub</td>
                            <td>class&Sub</td>
                            <td>class&Sub</td>
                        </tr>
                    </tbody>
                    <tr>
                        <td>WednessDay</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                    </tr>
                    <tr>
                        <td>Thursday</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                    </tr>
                    <tr>
                        <td>Friday</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                    </tr>
                    <tr>
                        <td>Friday</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                    </tr>
                </table>
            </td>
        </tr>
    </tbody>
</table>
    </section>

css:

@media print {
    section {
        height:25cm;
    }

}

jsfiddle :

http://fiddle.jshell.net/8u9r4xnb/4/show/

Actually I want to take a print out of this tables. Print Preview should be having different pages.

Collectives™ on Stack Overflow

How to print tables in different pages at a time using javascript/Jquery

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related