Print all data in multiple page pagination

Question

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

Is you pagination working in AJAX loading the datas after you click on two or it is hiding and showing the datas — Naresh Kumar P, Sep 01 '16 at 05:00
if you can use data table display data then use [this link](https://datatables.net/extensions/buttons/examples/print/simple.html) print all data — Vidhyadhar Galande, Sep 01 '16 at 05:38
@NareshKumar.P .. When i click on two the rest of the data will appear ..from 16 - 19 ..and it will also limit only 15 data per number pagination. What do you mean by working in ajax? — Daniel, Sep 01 '16 at 06:41
@VidhyadharGalande ... yes this link that you just gave me ...it is very good ..but that is very hard for me to read the code because im still beginner programmer. So if you could give me a much more simple example ..that will be great — Daniel, Sep 01 '16 at 06:45
Shall i explain of how to implement the Datatable for a table — Naresh Kumar P, Sep 01 '16 at 06:53
@VidhyadharGalande i have done it ..but only css code work ..my javascript did not work...it mean it is still print only 15 data.... — Daniel, Sep 02 '16 at 08:02
@Daniel you can use table structure then use only this script(Do not use div structure div print only current page) @ — Vidhyadhar Galande, Sep 02 '16 at 08:41
..i put this input button and the javasripct code ..if i didint put the javascript code and then i click the button print. it will not appear print dialog — Daniel, Sep 02 '16 at 08:53

score 1 · Accepted Answer · edited Sep 02 '16 at 07:29

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:

let me try it first then i tell the result – Daniel Sep 01 '16 at 07:32 — Daniel, Sep 01 '16 at 07:32

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

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

score 0 · Answer 3 · answered Mar 19 '17 at 19:39

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.

Print all data in multiple page pagination

3 Answers3

Linked