jQuery Datatable 扩展打印按钮以适用于同一页上的多个表

Question

我在 HTML 页面中有 1 to n table，我想在一个流程中打印所有这些。 jQuery Datatables 提供了一个“内置”打印按钮，但这仅适用于指定的 table。但是，从行中收集所有数据并打印它们必须有一些背后的逻辑。

是否可以扩展此逻辑以适用于同一页面上的多个 table？

我创建了这个 fiddle 作为游乐场。

这是内置打印按钮逻辑：

$('#example').DataTable( {
    dom: 'Bfrtip',
    buttons: [
        'print'
    ]
} );

需要这 2 个缩小的 js 才能使按钮正常工作： https://cdn.datatables.net/buttons/2.2.2/js/dataTables.buttons.min.js https://cdn.datatables.net/buttons/2.2.2/js/buttons.print.min.js

Answer 1

在多页中打印多个表

您可以让“全部打印”按钮调用一个函数，该函数将调用每个 table 的“打印”按钮。

因此，使用您的 fiddle 元素的 ID，定义 printAll:

function printAll() {
    $('#example_wrapper .buttons-print').click();   
    $('#example2_wrapper .buttons-print').click();
}

... 将被称为 on-click:

$('#print-all').click(printAll);

Full fiddle is here.

但是请注意，这将打开两个不同的页面进行打印。

在单页中打印多个表格

如果您希望在单页中进行打印，则需要按照以下步骤进行一些自定义：

为每个“打印”按钮使用 customize 选项。
在每一个上，将打开的打印window中的print-viewtablehtml放入某个全局变量中，并立即关闭打印window.
在 printAll 函数上：
一种。调用两个按钮的点击处理程序，使它们将 html 附加到全局变量
b.然后，使用聚合的 html 打开一个新的 window，不要忘记添加 DataTables CSS.
C。稍等片刻让打开的window完成加载，然后调用print.

Full fiddle is here，但为了完整起见，我会将最终的 js 代码放在以下代码段中：

注意：您可以随意自定义打印页面，只需将 html 元素添加到打印 window 正文中即可。请告知下面所附的链接。

var all = '';
$(document).ready(function() {
    $('#example').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            {
              extend: 'print',
                customize: function (win) {
                all += $(win.document.body).find('table')[0].outerHTML;
                win.close();
                },
            }
        ]
    } );
  $('#example2').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            {
              extend: 'print',
                customize: function (win) {
                all += $(win.document.body).find('table')[0].outerHTML;
                win.close();
                },
            }
        ]
    } );
    $('#print-all').click(printAll);
});

function printAll() {
    $('#example_wrapper .buttons-print').click();   
  $('#example2_wrapper .buttons-print').click();
  var win = window.open("about:blank", "Print View");
  win.document.write(
    '<html>\
        <head>\
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">\
            </head>\
      <body></body>\
      </html>');
  win.document.close();
  $(win.document.body).append(all);
  setTimeout(function () { win.print(); }, 1000);
}

进一步阅读：

How to get all stylesheets into the new window.
How to merge both tables into a single one for printing
DataTables' print documentation

jQuery Datatable 扩展打印按钮以适用于同一页上的多个表

jQuery Datatable extend print button to work for multiple tables on same page

javascript

jquery

datatables