[英]How to print tables in different pages at a time using javascript/Jquery
Here I have requirement to print html tables in different pages at a time. 在这里,我需要一次在不同的页面中打印html表。 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 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>
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. 如果使用CSS打印,则可以仅在第一个表格的底部或要设置分页符的任何位置添加。 (just an option thought) (只是一个选择的想法)
@media print {
.page-break {page-break-after: initial;}
}
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: CSS:
@media print {
section {
height:25cm;
}
}
jsfiddle : jsfiddle:
http://fiddle.jshell.net/8u9r4xnb/4/show/ http://fiddle.jshell.net/8u9r4xnb/4/show/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.