时间戳

首页 > 解决方案 > DataTables 仅打印选定的选项

javascript - DataTables 仅打印选定的选项

问题描述

我有一个带有选择输入和打印按钮的数据表，在打印时我得到了所有选择选项标签文本。如何打印只有选定选项可见的表格？

在此处输入图像描述

在此处输入图像描述

标签： javascriptjquerydatatables

解决方案

对我来说，深入修改 DOM（添加额外的隐藏<span>节点、保持其内容最新并<select>在打印时切换具有原始节点的节点的可见性）而不是使用实际的 DataTables 数据是远离 DataTables API 的方式。

我可能建议的是通过扩展按钮的默认行为来自定义打印窗口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());  
});

您可以在下面找到此方法的完整演示（由于实时代码段安全策略，它无法打开打印窗口，您可以参考此代码笔或将 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我无法建议相关代码，因为您没有发布任何代码，但是，我想这个概念听起来很清楚，因此您可以轻松地将其部署到您的项目中

推荐阅读