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

user_6781815 0
Viewed 788

I have a simple data table. I have added a custom tool-tip div in datatable with table's headings. (Reference).

When I try to export my file into excel/pdf, it also add the tooltip text in file as well.

enter image description here

Datatable's Settings:

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

Any idea how can I handle this issue. I can't find anything useful.

datatables-1.10 angular datatables jquery
1 Answers

It would have been nice with a sample of the markup :) But by following the link I see you are just using a <div class="tooltip"><span class="tooltiptext"></span></div> inside the <th>'s.

Look at DataTables exportOptions -> https://datatables.net/reference/api/buttons.exportData() You can manipulate all parts of the table before it is exported. A simple jQuery approach could be 

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