ignore any HTML tag in TD when download table

shubham9039

I am using the datatables I have a concern when I download the table it downloads the HTML tag in CSV format.
I want to ignore the span tag OR any HTML tag from TD in datatable.net
I am using this code as below.

<table>
    <thead>
        <tr>
            <td>SL</td>
            <td>VALUE</td>
        </tr>
    </thead>
    <tr role="row" class="odd">
        <td>1</td>
        <td>
            <a class="tools">0<span class="popup">--</span></a>
        </td>
    </tr>
</table>

var $_table = $("table").DataTable({
    responsive: true,
    scrollY: "300px",
    scrollX: true,
    scroller: true,

    colReorder: {
        fixedColumnsLeft: 1,
        fixedColumnsRight: 1,
    },

    bPaginate: false,
    lengthChange: false,
    searching: true,
    bInfo: false,
    classes: {
        sLength: "dataTables_length text-left w-auto",
    },

    buttons: {
        dom: {
            button: {
                className: "btn",
            },
            container: {
                className: "dt-buttons btn-group bgc-white-tp2 text-right w-auto",
            },
        },

        buttons: [
            {
                extend: "colvis",
                text: "<i class='fa fa-eye text-125 text-dark-m2'></i> <span class='d-none'>Show/hide columns</span>",
                className: "btn-light-default btn-bgc-white btn-h-outline-primary btn-a-outline-primary",
                columns: ":not(:first)",
            },

            {
                extend: "copy",
                text: "<i class='fa fa-copy text-125 text-purple'></i> <span class='d-none'>Copy to clipboard</span>",
                className: "btn-light-default btn-bgc-white btn-h-outline-primary btn-a-outline-primary",
            },

            {
                extend: "csv",
                text: "<i class='fa fa-download text-125 text-success-m1'></i> <span class='d-none'>Export to CSV</span>",
                className: "btn-light-default btn-bgc-white btn-h-outline-primary btn-a-outline-primary",
            },

            {
                extend: "print",
                text: "<i class='fa fa-print text-125 text-orange-d1'></i> <span class='d-none'>Print</span>",
                className: "btn-light-default btn-bgc-white  btn-h-outline-primary btn-a-outline-primary",
                autoPrint: false,
                message: "This print was produced using the Print button for DataTables",
            },
        ],
    },

    order: [],
});

allan

For an HTML loaded table like this, using a data formatter on export is probably the best option.

Allan

shubham9039

I understand, but I dont know where I use this buttonCommon code in my own code. could you pls help me

var buttonCommon = {
        exportOptions: {
            format: {
                body: function ( data, row, column, node ) {
                    // Strip $ from salary column to make it numeric
                    return column === 2 ?
                        data.replace( /[$,]/g, '' ) :
                        data;
                }
            }
        }
    };

allan

{
  extend: "csv",
  text: "<i class='fa fa-download text-125 text-success-m1'></i> <span class='d-none'>Export to CSV</span>",
  className: "btn-light-default btn-bgc-white btn-h-outline-primary btn-a-outline-primary",
  exportOptions: {
    format: {
      body: function (data, row, column, node) {
        // ...
      },
    },
  },
}

is what is basically boils down to.

Allan

shubham9039

now my CSV download in <a class="tools">Hello<span class="popup">Name</span></a>
whereas it should be on Hello in CSV
Please help

exportOptions: {
  format: {
    body: function(data, row, column, node) {
      return column === 2 ?
        data.replace(/[$,]/g, '') : data;
    },
  },
}

kthorngren

You need to use a regex expression that removes HTML tags. The one you are using only removes $ and , for currency values. See this stack Overflow thread for suggestions.

Kevin