Export data from datatable with select element exports each option from the select element

Question

I am try to add export buttons to my datatable, my table include select boxes inside, the problem is - it export all the options values included in the select box... A am using ajax to get results from the server then manipulate different data before render using dataSrc function like so:

dataTableInit: function (columns_def) {
    var me = this;
    me.dataTable_obj = $('#leads_table').DataTable({
       "pageLength": per_page,
        dom: 'Blfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ],
        "order": [order],
        "ajax": {
            url: route,
            type: method,
            data: filtering_data,
            "dataSrc": function (json) {
                return me.setLeadsTableData(json);
            }
        },
       "columns": columns_def,
       ....

in the setLeadsTableData i checking the columns returned from the server then if it a column that should be a select box I am changing it template like so:

 setStatusesSelectBox: function (status_obj, lead_id) {
    var me = this;
    var statuses_list = '';
    var bg_color = status_obj.name == "new" ? me.new_status_row_bg_color : '';
    $.each(me.client_statuses, function (key, val) {
        if (val.id != status_obj.id) {
            if (typeof val.is_won !== "undefined" && val.is_won != 0) {
                statuses_list += "<option data-icon='fa fa-thumbs-o-up' value='" + val.id + "'>" + val.name + "</option>";
            } else if (typeof val.is_lost !== "undefined" && val.is_lost != 0) {
                statuses_list += "<option data-icon='fa fa-thumbs-o-down' value='" + val.id + "'>" + val.name + "</option>";
            } else {
                statuses_list += "<option value='" + val.id + "'>" + val.name + "</option>";
            }
        } else {
            if (typeof val.row_bg_color !== 'undefined') {
                bg_color = val.row_bg_color;
            }
            if (typeof status_obj.is_won !== "undefined" && status_obj.is_won != 0) {
                statuses_list += "<option data-icon='fa fa-thumbs-o-up' value='" + val.id + "' selected>" + val.name + "</option>";
            } else if (typeof status_obj.is_lost !== "undefined" && status_obj.is_lost != 0) {
                statuses_list += "<option data-icon='fa fa-thumbs-o-down' value='" + val.id + "' selected>" + val.name + "</option>";
            } else {
                statuses_list += "<option value='" + val.id + "' selected>" + val.name + "</option>";
            }
        }
    });
    statuses_list += "</select>";
    var select_start = "<select name='status' data-show-icon='true' data-row-bg='" + bg_color + "' class='form-control status-select' data-lead-id='" + lead_id + "'>";
    ;
    return select_start + statuses_list;
},

any answer will help, appreciate it

Answer 1

Use exportOptions'format.body callback to get control over the exported data. Use the dataTables API to find the current selected value for each <select> box. Here for the first column and pdf :

buttons: [
  { 
    extend : 'pdf',
    exportOptions : {
      format: {
        body: function( data, row, col, node ) {
          if (col == 0) {
            return table
              .cell( {row: row, column: col} )
              .nodes()
              .to$()
              .find(':selected')
              .text()
           } else {
              return data;
           }
        }
      }
    },
    ...
  }
]

Where table is the table instance, in your case me.dataTable_obj. Now just change if (col == 0) { so it respond to the columns where you have <select> boxes (I dont know that).

Answer 2

In case you'll use export format for only visible columns, fixed column indexes will play some tricks on you, so what helped in my case was checking the node child and if it is select, then make the format

body: function(data, row, col,node) {
   var elementType = node.firstChild;
   if (elementType != null) {
         if (elementType.nodeName == "SELECT") return 
         $(elementType).find(':selected').text();
         else return data;
   }
   else return data

Answer 3

Credit to Mikhail Ushakov for getting me started. There were some opportunities to simplify the code and to make it work a little smoother (in my case) the biggest problem being that just about everything in my tables is a link or select. In the case of links, the other code was also capturing the html for the link, not the text. In my case I also had weird stuff like tables, so I had to anticipate multiple children in each node. Also opted not to use JQuery ;)

exportOptions: {
    format   : {
        body : (data, row, col, node) => {
            let node_text = '';
            const spacer = node.childNodes.length > 1 ? ' ' : '';
            node.childNodes.forEach(child_node => {
                const temp_text = child_node.nodeName == "SELECT" ? child_node.selectedOptions[0].textContent : child_node.textContent;
                node_text += temp_text ? `${temp_text}${spacer}` : '';
            });
            return node_text;
        }
    }
},