Question

我使用带有Buttons扩展名的jQuery DataTables。我可以在this example中看到打印按钮。

我的表：

<table class="table table-bordered">
    <thead>
        <tr>
            <th class="text-center">Active</th>
            <th class="text-center">Pipeline</th>
        </tr>
    </thead>
        <tbody>
            <tr>
                <td>100</td>
                <td>121<span class="hidden">Hidden Text</span></td>
            </tr>
        </tbody>
</table>

但它在打印预览窗口和纸张上显示：

Active Pipeline
100    121 Hidden Text

我希望将其打印为：

Active Pipeline
100    121

如何排除打印类hidden的元素？

Answer 1

<强>原因

默认情况下，jQuery DataTables在准备打印预览窗口时会删除HTML。这就是为什么不应用CSS规则而隐藏文本显示在打印预览窗口和纸上的原因。

<强>解

您需要自定义DataTables打印按钮并使用stripHtml: false选项，请参阅以下示例代码：

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

我假设你有以下CSS规则来隐藏类hidden的元素。

.hidden { display: none; }

<强>样本

请参阅this jsFiddle以获取代码和演示。

使用DataTables按钮打印忽略表格单元格中的隐藏元素

1 个答案: