Print all data in multi-page pagination

Question

I have a problem printing all the data in a paginated data table. I am already doing research and found the same question in this link

Print <div id = "printarea"> </div> only?

Print multiple pages using Javascript

but some of the codes do not work in my project or maybe I do not understand the encoding.

This is a coding example that I have already tried. Basically I have 19 data in the database .. but on this page I limit this to 15

therefore, when I click the Print button, I don’t have to go to every page to print all the data in the data table.

this is the code i use to print the buttons

<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; } 

Answer 1

So, for this table, if you apply the print option, it will print all the available data, because if it is under pagination, just as you need.

DataTables is a jQuery JavaScript library plugin. This is a very flexible tool based on the foundations of progressive improvement and will add additional interaction controls to any HTML table.

You can apply datatable to any table as you wish.

Js to be added to 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> 

Therefore, if you apply datatable to this table, you will get this output.

Output:

Answer 2

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" /> 

Exit

Answer 3

At the same time, there was a problem with a paginated grid with approximately 5,000 lines. Since we do not have the full data displayed in the browser, the print() call will only show the current lines in the viewport.

As a result, we send the model (data that supports the grid) back to the server, render on the server side (we use thymeleaf ), and then send the full html string to the browser. Now we can create an iframe on the fly and write the content to it and call print() on the iframe. Finally, we remove the iframe from the DOM. The client code in the success callback looks like this:

  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 part, you are creating html with any technology that you have. If you have a similar stack with us ( Java/Spring/Angular ), look at my other POST . Hope this can help someone who has a similar issue with pagination printing.