Игнорировать HTML из заголовка в Jquery Datatables при экспорте в файл

У меня есть простая таблица данных. Я добавил пользовательскую подсказку div в datatable с заголовками таблицы. (Справочник).

Когда я пытаюсь экспортировать свой файл в excel/pdf, он также добавляет текст всплывающей подсказки в файл.

введите здесь описание изображения

Настройки Datatable:

 $('#storyTable').DataTable({
    ordering: true,"autoWidth": false,
    paging: true,
    searching: true,
     dom: 'Bfrtip',
    buttons: [
        'copyHtml5',
        'excelHtml5',
        'csvHtml5',
        'pdfHtml5'
    ]
} );

Любая идея, как я могу справиться с этой проблемой. Я не могу найти ничего полезного.


person Mishi    schedule 07.04.2020    source источник


Ответы (1)


Было бы неплохо с образцом разметки :) Но, перейдя по ссылке, я вижу, что вы просто используете <div class="tooltip"><span class="tooltiptext"></span></div> внутри <th>.

Посмотрите DataTables exportOptions -> https://datatables.net/reference/api/buttons.exportData() Вы можете манипулировать всеми частями таблицы до ее экспорта. Простой подход jQuery может быть

...
buttons: [
  {
    extend: 'pdfHtml5',
    exportOptions: {
      format: {
        header: function (data) {
          return $('<div></div>')
            .append(data)
            .find('.tooltip')
            .remove()
            .end()
            .text()
          }
        }   
      }  
    }         
  },
  {
    extend: 'excelHtml5',
    ...and so on
  }
],
...
person davidkonrad    schedule 14.04.2020
comment
у меня это не сработало, и почему .append(data)? - person jimh; 01.12.2020
comment
@jimh возвращает содержимое TD без элемента всплывающей подсказки. Это особый случай с элементом определенного типа. - person davidkonrad; 02.12.2020
comment
у меня сработало удаление .append(data), а затем выполнение return $(data).find( и т. д. - person jimh; 02.12.2020