以多页分页打印所有数据答案

【问题标题】：Print all data in multiple page pagination以多页分页打印所有数据
【发布时间】：2017-01-08 19:56:42
【问题描述】：

我无法打印具有分页的数据表中的所有数据。我已经进行了研究，并在此链接中发现了同样的问题

但是某些编码在我的项目中不起作用，或者我可能不理解编码。

这是我已经尝试过的示例编码..所以基本上我在数据库中有 19 个数据..但在这个页面中我将其限制为 15 个

所以当我点击按钮打印时，我不必去每一页打印数据表中的所有数据。

这是我用于按钮打印的代码

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

【问题讨论】：

你是在AJAX中工作的分页在你点击两个之后加载数据还是隐藏和显示数据
如果可以使用数据表显示数据则使用this link打印所有数据
@NareshKumar.P .. 当我单击两个时，其余数据将出现 ..从 16 到 19 ..它还将限制每个数字分页仅 15 个数据。用 ajax 工作是什么意思？
@VidhyadharGalande ...是的，您刚刚给我的这个链接...非常好..但这对我来说很难阅读代码，因为我仍然是初学者程序员。所以如果你能给我一个更简单的例子..那就太好了
我应该解释一下如何为一个表实现数据表

标签： javascript php html mysql pagination

【解决方案1】：

因此，对于此表，如果您应用打印选项，它将打印所有可用的数据，因为如果它在分页下也按您的要求进行。

DataTables 是 jQuery JavaScript 库的插件。它是一个高度灵活的工具，基于渐进增强的基础，可以向任何 HTML 表格添加高级交互控件。

您可以根据自己的意愿将 Datatable 应用于任何表格。

要在您的页面上添加的 Js：

$(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 表格：

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

因此，如果您为此表应用数据表，您将收到这样的输出。

输出：

【讨论】：

让我先试一试，然后告诉结果

【解决方案2】：

试试这个代码

HTML 代码

 <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 文件

<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 文件

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

输出

【讨论】：

【解决方案3】：

最近对于大约 5000 行的分页网格也遇到了同样的问题。由于我们没有在浏览器中呈现完整的数据，因此调用print() 只会在视口中显示当前行。

我们最终要做的是将模型（支持网格的数据）发送回服务器，进行服务器端渲染（我们使用thymeleaf），然后将完整的 html 字符串发送回浏览器。现在我们可以即时创建一个iframe 并将内容写入其中并在iframe 上调用print()。最后，我们从 DOM 中移除 iframe。 success 回调中的客户端代码如下所示：

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

对于服务器端部分，您可以使用任何技术生成 html。如果你碰巧和我们有类似的堆栈（Java/Spring/Angular），看看我的另一个POST。希望这可以帮助在分页数据浏览器打印方面遇到类似问题的人。

【讨论】：