Как предотвратить отображение <options>при экспорте JavaScript DataTable

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' ] }

И когда я отправляюсь на экспорт, получаю результаты для заголовка столбца:

Создано ByA.FadhelA.GarciaC.FullerD.HauserJ.Perdomo

HTML-код после загрузки DataTables:

<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>

Как мне получить его для экспорта, не показывая опции в select?

Спасибо!

Answer 1

Вы сделали часть фильтра <select> заголовка, когда добавили его к заголовку с помощью .appendTo( $(column.header()) ). Поскольку вы экспортируете таблицу (я полагаю, как в этом примере DataTables Пример ) вы экспортируете все внутри него, включая <select>. Вам нужен фильтр внутри стола?

Если нет: Поместите элемент <select> где-нибудь еще, как внутри <div>.

Если это так: Попробуйте удалить элемент select перед экспортом и повторно добавить его после. Используйте select.detach(); до экспорта и select.appendTo( $(column.header()) ); после экспорта. При использовании .detach() функция onchange должна оставаться неизменной.

Если бы вы могли уточнить, почему вы положили фильтр внутрь, это было бы полезно.