以多页分页打印所有数据 [英] Print all data in multiple page pagination
问题描述
我有问题打印具有分页的数据表中的所有数据。我已经做过研究并在此链接中找到了同样的问题
所以当我点击按钮打印时，我不必去每个页面打印数据表中的所有数据。
这是我用于按钮打印的代码
< div id =printableArea>
< h1>打印我< / h1>
Javascript
function printDiv（divName）{
var printContents = document.getElementById（divName）.innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print（）;
document.body.innerHTML = originalContents;
}
所以对于这个表，如果你应用打印选项，它将打印所有可用的数据，因为如果它也按照您的要求进行分页。
DataTables是jQuery JavaScript库的插件。它是一个高度灵活的工具，基于渐进增强的基础，并将为任何HTML表添加高级交互控件。
您可以将Datatable应用于任何表格你的愿望。
在你的页面上添加Js：
$（document）.ready（function（）{
$（'＃myTable'）。DataTable（）;
}）;
CSS：
< link rel =stylesheettype =text / csshref =https://cdn.datatables.net/1.10.12/css/jquery.dataTables。 min.css/>
JS：
< script src =https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js>< / script>
HTML表：
< div id =printableArea>
< table id =myTableclass =displaywidth =100％cellspacing =0>
< thead>
< tr>
< th>名称< / th>
< th>职位< / th>
< th> Office< / th>
< th>年龄< / th>
< th>开始日期< / th>
< th> Salary< / th>
< / tr>
< / thead>
< tfoot>
< tr>
< th>名称< / th>
< th>职位< / th>
< th> Office< / th>
< th>年龄< / th>
< th>开始日期< / th>
< th> Salary< / th>
< / tr>
< / tfoot>
< tbody>
< tr>
< td> Tiger Nixon< / td>
< td>系统架构师< / td>
< td>爱丁堡< / td>
< td> 61< / td>
< td> 2011/04/25< / td>
< td> $ 320,800< / td>
< / tr>
< tr>
< td> Garrett Winters< / td>
< td>会计< / td>
< td> Tokyo< / td>
< td> 63< / td>
< td> 2011/07/25< / td>
< td> $ 170,750< / td>
< / tr>
< tr>
< td> Ashton Cox< / td>
< td>初级技术作者< / td>
< td>旧金山< / td>
< td> 66< / td>
< td> 2009/01/12< / td>
< td> $ 86,000< / td>
< / tr>
< tr>
< td> Cedric Kelly< / td>
< td>高级Javascript开发者< / td>
< td>爱丁堡< / td>
< td> 22< / td>
< td> 2012/03/29< / td>
< td> $ 433,060< / td>
< / tr>
< tr>
< td> Airi Satou< / td>
< td>会计< / td>
< td> Tokyo< / td>
< td> 33< / td>
< td> 2008/11/28< / td>
< td> $ 162,700< / td>
< / tr>
< tr>
< td> Brielle Williamson< / td>
< td>整合专家< / td>
< td>纽约< / td>
< td> 61< / td>
< td> 2012/12/02< / td>
< td> $ 372,000< / td>
< / tr>
< tr>
< td> Herrod Chandler< / td>
< td>销售助理< / td>
< td>旧金山< / td>
< td> 59< / td>
< td> 2012/08/06< / td>
< td> $ 137,500< / td>
< / tr>
< / table>
< / div>
因此，如果您为此表应用数据表，您将收到这样的输出。
输出：
I have problem to print all data in data table that have pagination. I have already do research and found this same question in this link
Print <div id="printarea"></div> only?
Printing multiple pages with Javascript
but some of the coding wont work in my project or maybe i dont understand the coding.
this is the example coding that i already tried..so basically i have 19 data in the database ..but in this page i limit it to 15
so when i click button print i dont have to go to every page to print all the data in data table.
this is the code that i use for button print
<div id="printableArea">
<h1>Print me</h1>
Javascript
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
So for this Table if you apply the print option it will print all the data that are available since if it under pagination also as required by you.
DataTables is a plug-in for the jQuery JavaScript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, and will add advanced interaction controls to any HTML table.
You can apply Datatable to any table as per your wish.
Js to be added on your page:
$(document).ready(function(){
$('#myTable').DataTable();
});
CSS:
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />
JS:
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
HTML Table:
<div id="printableArea">
<table id="myTable" class="display" width="100%" cellspacing="0">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
</table>
</div>
Hence if you apply the datatable for this Table you will receive an output like this.
Output:
这篇关于以多页分页打印所有数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
