有条件地将样式添加到打印视图中的数据表行

Question

我正在尝试在 Datatables 打印视图中设置特定行的样式。

我有一个表格，其中包含行 o 财务项目。它们按发票编号分组，发票完成后会显示一个汇总行：

此屏幕截图显示了报告的打印视图。我想要做的是将“摘要”行设置为打印视图更明显的颜色。我知道我可能需要修改数据表的打印自定义功能，但根据一些研究，类不会导出打印视图，因此我无法为行设置类或 ID 的样式。

我似乎找不到任何关于这个特定问题的文章，所以我不完全确定从哪里开始，但这是我目前用于生成打印视图的代码：

customize: function ( win ) {
            $(win.document.body)
                .css( 'font-size', '10pt' )
                .prepend(
                    `<style>@page{size: landscape;}</style>
                    <div class="container">
                        <div style="width:100%;">

                            </div>
                            <div style="float: right;">
                                <h2>Payment ID: ` + $('#ddl_payment_payment').val() + `</h2>
                                <h4>Payment Date: ` + paymentTable.cell(0,3).data() + `</h3>
                                <h4>Sub-contractor: ` + $('#ddl_payment_subContractor').val() + `</h3>
                            </div>
                        </div>
                    </div>`
                )
                .append(
                    `<div class="container">
                        <div style="float:right;">
                            <h4>Total: ` + $('#span_paymenttotal').html() + `</h1>
                        </div>
                    </div>`
                );
            $(win.document.body).find( 'table' )
                .addClass( 'compact' )
                .css( 'font-size', 'inherit' );
            $(win.document.body).find('summaryRow')
                    .css('color', 'red');

Answer 1

这是向 DataTable 的打印视图添加自定义格式的一种方法。

首先，这里是 HTML 数据表：

这是打印视图的样子：

实现：

<script type="text/javascript">

  $(document).ready(function() {

    $('#example').DataTable({
      dom: 'Bfrtip',

      buttons: [
        {
          extend: 'print',
          autoPrint: false,
          exportOptions: {
            format: {
              body: function ( inner, rowidx, colidx, node ) {
                if (node.classList.contains('summary')) {
                  return '<span class="summary" style="color:red; font-style:italic;">' + inner + '</span>';
                } else {
                  return inner;
                }
              }
            }
          },
          customize: function ( win, butt, tbl ) {
            $(win.document.body).find('span.summary').css('font-size', '20px');
            $(win.document.body).find('span.summary').parent().css('background-color', 'yellow');
          }
        } 
      ]

    });

  });
</script>

解释性说明：

在我的数据中，我已将 summary 类插入到我想要操作的那些单元格中 - 例如：

<tr>
    <td class="summary">Bradley Greer</td>
    <td class="summary">Software Engineer</td>
    <td class="summary">London</td>
    <td class="summary"></td>
    <td class="summary">2012/10/13</td>
    <td class="summary">$132,000</td>
 /tr>

没有与此类名称关联的样式。

对于我的演示，我只是对这些进行了硬编码。但 DataTables 提供了多种动态处理此问题的方法，作为表初始化和数据处理的一部分。

然后我使用format.body 功能（在this page 上进行了描述）。我使用它来更改使用 summary 类的所有单元格的数据内容（特别是字体颜色）。

这里的关键是创建一个跨度，它添加回被剥离的类名。正如您所注意到的，打印处理器会从打印视图中删除所有此类手动添加的类和样式。

现在我可以使用customize 函数（记录在this page）来使用我新添加的类名。对于每个相关的span，我找到父td 并调整其样式。

最后说明：要打印出免费的阴影，我必须从打印菜单中选择一个“打印背景”选项——不过，这可能只是我的打印机。

希望对您有所帮助 - 或者至少为您提供一些满足您特定需求的想法。