Custom bootstrap popover data attribute visible in data exported using Excel export button

Custom bootstrap popover data attribute visible in data exported using Excel export button

tbrcrltbrcrl Posts: 13Questions: 6Answers: 0

Hi, I am using the button extension to export Excel files. If in the column title I insert a Bootstrap custom popover, in the exported Excel file some data attribute appear along with the column title.
Please refer to the demo
live.datatables.net/xozibihu/1/edit
Leave only the output tab to see the Excel button, press it and open the Excel file, you will see that in addition to the "Name" column title there is also a string
" data-content="Full name" data-original-title="" title="">
that is part of Bootstrap popover data attributes.
The problem happens only if the popover option "template" is used
data-template='<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
see
https://getbootstrap.com/docs/3.3/javascript/#popovers-options
All the other data attribute do not cause any issue.
Any idea to bypass the problem?
Thanks

Answers

  • sigewebsigeweb Posts: 1Questions: 0Answers: 0

    This issue was already found in: https://datatables.net//forums/discussion/comment/83236
    Inside the data-template you can use html tags but the stripHtml option strips only the first (I suppose the <div> or <span> or <img> containing the data-template).
    The solution is to replace the line 1728 in dataTables.buttons.js (version 1.4.2) from

    if ( config.stripHtml ) {
    str = str.replace( /<[^>]*>/g, '' );
    }
    

    to

    if ( config.stripHtml ) {
    str = str.replace( /<[^>"']*((("[^"]*")|('[^']*'))[^"'>]*)*>/g, '');
    }
    
  • tbrcrltbrcrl Posts: 13Questions: 6Answers: 0

    sigeweb and I found this solution that works correctly (please refer to https://datatables.net/extensions/buttons/examples/html5/outputFormat-function.html

    buttons: [{
        extend: 'excel',
        exportOptions: {
          format: {
            header: function ( data, row, column, node ) { return data.replace(/<[^>"']*((("[^"]*")|('[^']*'))[^"'>]*)*>/g,"").trim(); }
          }
        }
      }],
    
  • allanallan Posts: 63,464Questions: 1Answers: 10,466 Site admin

    Thanks! Stripping HTML in regex is never going to be perfect unfortunately. For that reason the next major version of DataTables will have a proper API for getting header text.

    Allan

This discussion has been closed.