How to use the actual value of a cell and not the "render" value on export?

daveslab

Hi folks,

I've noticed that when I export using the Buttons extension of Datatables, that it takes the value present in the cells (i.e. those given by the render option when it is specified) and not the actual data value of the cell. Is there a way to change this behavior? For example, if I have a cell that shows an image based on the value of the data, could I export with the value and not the image?

Thanks!

allan

Is there a way to change this behavior?

Yes - use the orthogonal option of the exportOptions options in the button type (for example copy). That is passed through to buttons.exportData(). Set it to null and it we use the original data element rather than a rendered value.

Allan

daveslab

Great, thanks Allan!

stevevance

I do something similar to this, and it appears that Allan's solution is a little tighter/cleaner.

Like you, I didn't want to export the HTML-formatted "display" (or rendered) version of the data. I want to export the "raw" data.

So I use buttons.exportOptions.columns to have it select some hidden columns that have the raw data.

First there's an array that holds the desired (which are all visible:false) columns.

 exportColumns = [ "permit_type:name", "address:name", "issue_date_normalized:name", "issue_date_actual:name", "estimated_cost:name", "work_description:name", "latitude:name", "longitude:name"];

Then, for the table.buttons option, I have the following:

buttons: [
                        {
                            extend: 'copy',
                            text: "<i class='fa fa-clipboard'></i> Copy to clipboard",
                            exportOptions: {
                                columns: exportColumns
                            }
                        }
]

rodolphen

Hello,

I have the same problem, what do you mean by set tto null the orthogonal option?
I tried this but it doen't work.
l have a column I use render to display html and I want to exort the raw values.

buttons:    [ 
            {
                extend: 'excelHtml5',
                text: "Excel",
                "bFooter": false,
                 exportOptions: {
                        columns: ':visible',
                        orthogonal: {
                            display: ':null'
                        }       
                }
            }                       
]

Thank you,

Rodolphe

allan

That looks like it should work (assuming you are adding the HTML using a renderer?). Can you link to a test page showing the issue please.

Allan

rodolphen

It works now! With your message, I searched in another way.
It was an error, when data was null in render function, it crashed :
buttons.html5.min.js, ligne : 14, colonne : 22

I made a test on data in render function and return '' instead of null

Thank you,

Rodolphe

allan

Little update for this - the orthogonal option for the export options expects a string, not a function, so the above likely wouldn't work in retrospect - unless the rendering function accepted an object as the type parameter.

Allan

anteniyus

in your render function put ternary operator for recognizing export type and data type and add orthogonal in your buttons config.

render: function (data, type, row) {
return type === 'export' ?
data.replace( /[$,]/g, '' ) :
data;
}

and

buttons: [
{
extend: 'copyHtml5',
exportOptions: { orthogonal: 'export' }
}
]

https://datatables.net/extensions/buttons/examples/html5/outputFormat-orthogonal.html