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

Question

我正在使用带有Buttons扩展名的jQuery DataTables.我有打印按钮,如本例所示.

我的桌子:

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

DEMO

有关代码和演示,请参阅此jsFiddle.