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

我正在使用带有按钮扩展的jQuery数据表。如中所示，我有打印按钮

我的桌子：

活跃的
管道
100
121隐藏文本

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

活动管道
100 121隐藏文本

我希望它打印为：

活动管道
100    121 

如何从打印中排除类

隐藏的元素

原因

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

解决方案

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

$（'#示例'）。数据表（{
dom:'Bfrtip'，
按钮：[
{
扩展：“打印”，
出口选择：{
stripHtml:false
}               
}        
]      
} );    

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

.hidden{display:none；}

演示

有关代码和演示，请参阅

原因

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

解决方案

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

$（'#示例'）。数据表（{
dom:'Bfrtip'，
按钮：[
{
扩展：“打印”，
出口选择：{
stripHtml:false
}               
}        
]      
} );    

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

.hidden{display:none；}

演示

有关代码和演示，请参见。
.hidden{display:none；}
到css或html
$（'.hidden'）.hide（）中的
style='display:none'
.hidden{display:none；}
到css或html
$（'.hidden'）.hide（）中的
style='display:none'
我试过使用datatables，但它的打印在ui中显示了与上面相同的行为，它是隐藏的。@arunkumar，我想我现在明白你的意思了，你正在使用来自的打印按钮。我的解决方案不起作用，让我看看是否有其他解决方案。我试过使用datatables，但它在打印时在ui中显示了相同的上述行为，它是隐藏的。@arunkumar，我想我现在明白你的意思了，你正在从中使用“打印”按钮。我的解决方案行不通，让我看看是否有替代方案。