导出到文件时忽略 Jquery 数据表中 header 的 HTML

Question

我有一个简单的数据table。我在 datatable 中添加了自定义 tool-tip div 和 table 的标题。 (Reference)。

当我尝试将文件导出到 excel/pdf 时，它还会在文件中添加工具提示文本。

数据table的设置：

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

知道我该如何处理这个问题。我找不到任何有用的东西。

Answer 1

如果有标记示例就更好了 :) 但是按照 link 我看到你只是在 <th> 中使用了 <div class="tooltip"><span class="tooltiptext"></span></div>。

查看 DataTables exportOptions -> https://datatables.net/reference/api/buttons.exportData() 您可以在导出之前操作 table 的所有部分。一个简单的 jQuery 方法可以是

...
buttons: [
  {
    extend: 'pdfHtml5',
    exportOptions: {
      format: {
        header: function (data) {
          return $('<div></div>')
            .append(data)
            .find('.tooltip')
            .remove()
            .end()
            .text()
          }
        }   
      }  
    }         
  },
  {
    extend: 'excelHtml5',
    ...and so on
  }
],
...

导出到文件时忽略 Jquery 数据表中 header 的 HTML

Ignore HTML from header in Jquery Datatables while exporting to a file

jquery

datatables

datatables-1.10

angular