如何防止在<options>导出 javascript 数据表时显示

Question

我正在使用DataTables jQuery库来创建表，并希望使用其按钮功能启用它们的导出。 我让它工作，除非它执行导出时，它将标头过滤器中的所有内容作为标头的一部分包含在标题中。

我用来生成用于搜索的选择过滤器的代码是：

this.api().columns([2, 3]).every( function () {
var column = this;
var select = $('<br/><select><option value=""></option></select>')
.appendTo( $(column.header()) )
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search( val ? '^'+val+'$' : '', true, false )
.draw();
} );
column.data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' )
} );

} (;

我使用以下方法打开按钮：

dom: 'Bfrtip', 
buttons: [ 'copy', 'csv', 'excel', 'pdf', 'print' ] }

当我去导出时，列标题的结果是：

创建由A。法德拉。加西亚。富勒·豪瑟·佩尔多莫

数据表加载后的 HTML 为：

<th class="sorting" tabindex="0" aria-controls="table_iMZk6N3q3je7" rowspan="1" colspan="1" aria-label="Created By: activate to sort column ascending" style="width: 137px;">
Created By
<select>
<option value=""></option>
<option value="A. Fadhel">A. Fadhel</option>
<option value="A. Garcia">A. Garcia</option>
<option value="C. Fuller">C. Fuller</option>
<option value="D. Hauser">D. Hauser</option>
<option value="J. Perdomo">J. Perdomo</option>
</select>
</th>

如何在不显示选择选项的情况下将其导出？

谢谢！

Answer 1

当您将<select>过滤器附加到带有.appendTo( $(column.header()) )的标头时，您使过滤器成为标头的一部分。由于您正在导出一个表(我假设像这个示例数据表示例 ( 您正在导出其中的所有内容，包括<select>。您需要在表格内安装过滤器吗？

如果没有：将<select>元素放在其他地方，例如在<div>内。

如果是这样：请尝试在导出之前删除select元素，然后在之后重新附加它。 在导出前使用select.detach();，在导出后使用select.appendTo( $(column.header()) );。通过使用.detach()onchange 函数应保持不变。

如果您能澄清为什么要将过滤器放入其中，那将有所帮助。