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:
Try This Code
HTML Code
<div id="printableArea">
<table id="printableAreaTable" class="display" width="100%" cellspacing="0">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>ABC1</td>
<td>100000</td>
</tr>
<tr>
<td>2</td>
<td>ABC2</td>
<td>100000</td>
</tr>
<tr>
<td>3</td>
<td>ABC23</td>
<td>100000</td>
</tr>
<tr>
<td>4</td>
<td>ABC4</td>
<td>100000</td>
</tr>
<tr>
<td>5</td>
<td>ABC5</td>
<td>100000</td>
</tr>
<tr>
<td>6</td>
<td>ABC6</td>
<td>100000</td>
</tr>
<tr>
<td>7</td>
<td>ABC7</td>
<td>100000</td>
</tr>
<tr>
<td>8</td>
<td>ABC8</td>
<td>100000</td>
</tr>
<tr>
<td>9</td>
<td>ABC9</td>
<td>100000</td>
</tr>
<tr>
<td>10</td>
<td>ABC10</td>
<td>100000</td>
</tr>
<tr>
<td>11</td>
<td>ABC11</td>
<td>100000</td>
</tr>
<tr>
<td>12</td>
<td>ABC12</td>
<td>100000</td>
</tr>
<tr>
<td>13</td>
<td>ABC13</td>
<td>100000</td>
</tr>
<tr>
<td>14</td>
<td>ABC14</td>
<td>100000</td>
</tr>
</tbody>
</table>
</div>
javascript
$(document).ready(function() {
$('#printableAreaTable').DataTable( {
dom: 'Bfrtip',
buttons: [
'print'
]
} );
} );
Js Files
<script src="https://code.jquery.com/jquery-1.12.3.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js"></script>
cs files
<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css" rel="stylesheet" />
Output
Had the same problem recently for a paginated grid with about 5000 rows. Since we do not have the full data rendered in the browser, calling print() will only show the current rows in the viewport.
What we end up doing is sending the model(data backing the grid) back to server, do the server side rendering(we use thymeleaf), then send back the full html string to browser. Now we could create a iframe on the fly and write the content to it and call print() on the iframe. Lastly, we remove the iframe from DOM. Client side code in the success callback looks like:
var printIFrame = document.createElement('iframe');
document.body.appendChild(printIFrame);
printIFrame.style.position = 'absolute';
printIFrame.style.top = -999;
printIFrame.style.left = -999;
var frameWindow = printIFrame.contentWindow || printIFrame.contentDocument || printIFrame;
var wdoc = frameWindow.document || frameWindow.contentDocument || frameWindow;
wdoc.write(res.data);
wdoc.close();
// Fix for IE : Allow it to render the iframe
frameWindow.focus();
try {
// Fix for IE11 - printng the whole page instead of the iframe content
if (!frameWindow.document.execCommand('print', false, null)) {
// document.execCommand returns false if it failed -http://stackoverflow.com/a/21336448/937891
frameWindow.print();
}
// focus body as it is losing focus in iPad and content not getting printed
document.body.focus();
}
catch (e) {
frameWindow.print();
}
frameWindow.close();
setTimeout(function() {
printIFrame.parentElement.removeChild(printIFrame);
}, 0);
For the server side part, you generate the html with whatever technology you have. If you happen to have similar stack as us(Java/Spring/Angular), look at my other POST. Hopefully this could help someone having similar problem with paginated data browser printing.
{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://i.stack.imgur.com/gVdBp.jpg', '推荐 祖国的老花朵 的文章《Print all data in multiple page pagination》','https://www.manongdao.com/article-629864.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}