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

Question

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

我的 table :

<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

CAUSE

默认情况下，jQuery DataTables 在准备打印预览窗口时会剥离 HTML。这就是未应用 CSS 规则且隐藏文本显示在打印预览窗口和纸张上的原因。

SOLUTION

需要自定义DataTables的打印按钮，使用stripHtml: false选项，示例代码如下:

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

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

.hidden { display: none; }

DEMO

参见 this jsFiddle用于代码和演示。