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创建。 FadhelA。加西亚富勒D.豪瑟J. Perdomo

DataTables加载后的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()) )过滤器部分附加到标头后，便成为该标头的一部分。由于您正在导出表格（我假设像这样的示例DataTables Example ），您将导出其中的所有内容，包括<select>。您是否需要在表格内放置过滤器？

如果不是：：将<select>元素放在其他位置，例如放在<div>内。

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

如果您可以弄清为什么将过滤器放入其中，将会很有帮助。

如何防止在导出JavaScript DataTable时显示<options>

1 个答案: