ignore any HTML tag in TD when download table

ignore any HTML tag in TD when download table

shubham9039shubham9039 Posts: 4Questions: 2Answers: 0

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: [],
});

Answers

  • allanallan Posts: 57,686Questions: 1Answers: 9,195 Site admin

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

    Allan

  • shubham9039shubham9039 Posts: 4Questions: 2Answers: 0

    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;
                    }
                }
            }
        };
    
  • allanallan Posts: 57,686Questions: 1Answers: 9,195 Site admin
    {
      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

  • shubham9039shubham9039 Posts: 4Questions: 2Answers: 0

    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;
        },
      },
    }
    
    
  • kthorngrenkthorngren Posts: 17,688Questions: 25Answers: 4,197

    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

Sign In or Register to comment.