Search code examples
datatabledatatables

Export DataTables return [object Object] value

I want to export my datatable as CSV file. Unfortunately the Order History returns [object Object] value in CSV File. I have tried by looking this forum https://datatables.net/forums/discussion/50304/datatable-is-showing-object-object-in-columns#Comment_133450 but I'm not sure how should apply on my code.

Below the csv file, that give output [object Object] for Order History.

enter image description here

As for the datatables, it return the value that I wanted.

enter image description here

Here's my code: LIVE JS BIN DEMO

The Server_Processing.php JSON

 {
  "draw": 1,
  "recordsTotal": 238633,
  "recordsFiltered": 183514,
  "data": [
    [
      "6789",
      "North City"
    ],
    [
      "5325",
      "South City"
    ]
  ]
}

Output console.log(result) for fetch_total.php ajax call

{"data":[[6]]}
{"data":[[1]]}

Basically I've pass the ID_No value to ajax call, and it will return the readable value to the cell.

I've tried by using JSON.stringify to the additionalData, it still return [object Object] value when I export as CSV file.

Any help would be greatly appreciated

Solution

  • Solution

    The simplest way to fix this is to add an exportOptions section to your DataTable buttons option.

    So, instead of this:

    buttons: [ 'csv' ],

    you can use this:

    buttons: [
  {
    extend: 'csv',
    exportOptions: {
      format: {
        body: function ( inner, rowidx, colidx, node ) {
          return node.innerText;
        }
      }
    }
  }
],

    And you can repeat the { extend: ... } section for additional buttons (e.g. Excel).

    This logic ensures you take the value loaded into the DOM node (the HTML table cell) instead of the value stored in the DataTable (an object).

    Explanation

    In your logic, you are using this:

    "createdCell": function(cell, cellData, rowData, rowIndex, colIndex) { ... }

    This is documented here.

    The key point is:

    cell: The TD node that has been created.

    In other words, this <td> element is what you see displayed in the web page - the HTML. It is not what is stored in the underlying DataTable (which is the createdCell function used to create the contents of that <td> element).

    So, when you try to export your data, DataTables will use the data it has stored in its internal data structures. It does not use the data you added to the HTML table.

    My exportOptions function solves that by telling DataTables to look at the data in the HTML table directly (node.innerText) instead of using its internal data.

    This is a very basic solution. It looks in every <td> cell in the HTML table, not just the third column. In your case, this is probably fine. But you may need to refine this, if there are other cases where you do not want to use the cell contents.

    Also, I agree with the comments made in the question by @mark_b:

    You're making a separate Ajax call for each row of your data in order to populate the Order History column? Surely there is a more efficient way to get all the data you need in a single request?