时间戳

首页 > 解决方案 > 如何预防导出 javascript DataTable 时显示

javascript - 如何预防导出 javascript DataTable 时显示

问题描述

我正在使用 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. 加西亚 C. 富勒 D. 豪瑟J。佩尔多莫

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>

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

谢谢！

标签： javascriptjquerydatatables

解决方案

当您将<select>过滤器附加到带有.appendTo( $(column.header()) ). 由于您正在导出一个表（我假设像这个示例DataTables Example ），您正在导出其中的所有内容，包括<select>. 你需要把过滤器放在桌子里面吗？

如果不是：将<select>元素放在其他地方，例如在<div>.

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

如果你能澄清为什么你把过滤器放在里面，那会很有帮助。

推荐阅读