DataTables 仅打印选定的选项
Posted
技术标签:
【中文标题】DataTables 仅打印选定的选项【英文标题】：DataTables print only selected option 【发布时间】：2019-11-20 00:07:04 【问题描述】：我有一个带有选择输入和打印按钮的数据表，在打印时我得到了所有选择选项标签文本。如何打印只有选定选项可见的表格？
【问题讨论】：
【参考方案1】：对我来说，更深入地修改 DOM（添加额外隐藏的 <span> 节点，使其内容保持最新，并在打印时切换具有原始 <select> 节点的内容的可见性）而不是使用实际的 DataTables 数据是远离 DataTables API。
我可能建议改为通过extending Print 按钮的默认行为自定义打印窗口：
$('table').DataTable(
...
buttons: [
...
extend: 'print',
customize: function(win)
/* prepare whatever printing page you like */
]
)
从customize 选项回调中，您可以将表格的数据抓取到变量中，并制作另一个适合在打印窗口中打印的DataTable() (win)。
适合在这里打印我的意思是你可以去掉交互元素（搜索栏、按钮、分页控件等）并替换用户输入元素，如 <select> 或 <input> 为它们对应的值。例如。因此，可打印版本设置可能包含：
$('table').DataTable(
...
dom: 't',
paging: false,
order: []
)
您应该记住的一件事是，每当用户与原始表格中的 <select> 元素进行交互时，您必须将这些更改提交到基础数据（稍后将用于打印)，比如：
$('table').on('change', 'tbody select', function(e)
dataTable.cell($(this).closest('td')).data($(this).val());
);
您可以在下面找到此方法的完整演示（由于实时 sn-p 安全策略，它无法打开打印窗口，您可以参考此codepen 或将 JS 和 html 克隆到您当地的环境）。
$(document).ready(() =>
const dataTable = $('table').DataTable(
dom: 'Bt',
data: [opt: '', val: 'valueA', opt: '', val: 'valueB', opt: '', val: 'valueC'],
columns: [
title: 'Options',
data: 'opt',
render: data => '<select>'+['','Option1','Option2','Option3'].reduce((options,option) => options+=`<option value="$option" $option == data ? 'selected' : ''>$option</option>`,'')+'</select>'
,
title: 'Value',
data: 'val'
],
buttons: [
extend:'print',
customize: function(win)
const tableData = $('table').DataTable().data();
$(win.document.body).html('<table></table>');
$(win.document).ready(() =>
$(win.document.body).find('table').DataTable(
dom: 't',
data: tableData,
paging: 'false',
order: [],
columns: [
title: 'Options', data: 'opt',
title: 'Value', data: 'val'
]
)
)
]
);
$('table').on('change', 'tbody select', function(e)
dataTable.cell($(this).closest('td')).data($(this).val());
);
)<!doctype html><html><head><link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/rg-1.1.0/datatables.min.css" /><script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script><script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/rg-1.1.0/datatables.min.js"></script><script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script><script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script> </head><body><table></table></body></html>ps我无法建议相关代码，因为您没有发布任何代码，但是，我想这个概念听起来很清楚，所以您可以轻松地将其部署到您的项目中 p>
【讨论】：
【参考方案2】：首先浏览器不要尝试打印选择选项，而只打印选择的选项，这意味着您的打印 CSS 有问题，或者您没有使用本机功能。
如果您不想解决上述问题，下面的帖子提供了一种处理您的问题的方法。
How to use print.css to make a select look like normal text
在坚果壳中：
第 1 步：在 select 旁边创建一个 span 元素 第 2 步：在变量发生变化时保持 span 对象的更新 第 3 步：在您的打印 css 中保持选择隐藏。仅使用@media 打印 第 4 步：在你的屏幕 css 中保持 span 隐藏。仅使用@media 屏幕
享受并请阅读原始答案。
谢谢
【讨论】：
【参考方案3】：方法一：
尝试保持选择框的默认值为空白。
方法二：
您可以保留与select-box 值绑定的隐藏text-box，并使用媒体查询在打印时显示和隐藏文本框。
@media print
input.hiddendisplay:block;
select.language-boxdisplay:none;
方法三：
还有这个可能有帮助的活动
<body onbeforeprint="myFunction()">
虽然对这个事件的支持并不明确。 https://www.w3schools.com/tags/ev_onbeforeprint.asp
希望能回答你的问题:)
【讨论】：
以上是关于DataTables 仅打印选定的选项的主要内容，如果未能解决你的问题，请参考以下文章
如何仅为选定的打印机自定义 ReportViewer printDialog