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>
2 answers
solution1
1 2015-05-07 12:41:42
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;}
}
solution2
0 2015-05-07 10:33:42
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 :
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to print in two different printers at the same time using PHP or JavaScript?
How do I print different page using javascript/jQuery/ajax?
jQuery multiple tables row separate in pages for print
How to redirect pages using JavaScript or Jquery
Creating Multiple pages with different text to print with javascript
How can i control the number of pages to be print using javascript?
How to pass printing range of pages in javascript using window.print()?
How to print data using javascript/jquery
How to Print XML content using JavaScript or JQuery
How do include different HTML pages with Javascript/Jquery/HTML?
Related Tags