【问题标题】:Ignore HTML from header in Jquery Datatables while exporting to a file导出到文件时忽略 Jquery Datatables 中的标头中的 HTML
【发布时间】:2020-07-19 15:31:54
【问题描述】:

我有一个简单的数据表。我在带有表格标题的数据表中添加了一个自定义工具提示 div。 (Reference)。

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

数据表的设置:

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

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

【问题讨论】:

    标签: jquery angular datatables datatables-1.10


    【解决方案1】:

    如果有一个标记样本会很好:) 但是通过点击链接,我看到你只是在<th> 中使用了<div class="tooltip"><span class="tooltiptext"></span></div>

    查看 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
      }
    ],
    ...
    

    【讨论】:

    • 这对我不起作用,为什么.append(data)
    • @jimh 它返回 TD 内容减去工具提示元素。它是具有某种元素的特例。
    • 对我有用的是删除 .append(data) 然后执行 return $(data).find( 等。
    猜你喜欢
    • 2013-05-16
    • 1970-01-01
    • 1970-01-01
    • 2015-03-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多