6

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

davidkonrad
  • 83,997
  • 17
  • 205
  • 265
benjah
  • 613
  • 7
  • 29

3 Answers3

7

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).

davidkonrad
  • 83,997
  • 17
  • 205
  • 265
  • 1
    Worked like a charm, but just want to point that the order of the parameters is actually wrong. The correct body signature as of now would be "(data, row, col)". – v1n1akabozo Jan 15 '18 at 19:41
  • @v1n1akabozo You are right! Have updated the answer to `function( data, row, col, node )`. This is also how it is stated in the [docs](https://datatables.net/reference/api/buttons.exportData()#Type) and in this [official example](https://datatables.net/extensions/buttons/examples/html5/outputFormat-function.html). Thank you for pointing it out!! – davidkonrad Jan 16 '18 at 01:43
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
hcarrasko
  • 2,320
  • 6
  • 33
  • 45
Mikhail Ushakov
  • 23
  • 6
  • This example would benefit from better code formatting. It also didn't quite work as expected even when cleaned up. But thanks anyway! – jonlink Feb 22 '18 at 18:19
0

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;
        }
    }
},
jonlink
  • 542
  • 6
  • 18