CSV Export - retrieve the value associated with a table cell.

aeissa

The csv button export (official Datatables extension) works great when all you need to do is get the text of the table cells. I understand this is the most common use case.

I share that use case, but need additional flexibility. I have a column, for example labeled "Documents" and each cell will look something like this:

<td><a href="www.my-download-link.com">Download</a><td>

When I export the table for csv download, my goal is to write the value of <a href> to the csv file, which is "www.my-download-link.com", instead of the placeholder text "Download."

Any ideas on how to approach this? Is this something I can configure DataTables to do? My immediate guess is to start with this page (https://datatables.net/extensions/buttons/examples/html5/outputFormat-orthogonal.html), but I'm not sure if it enabled me to do what I'm asking.

colin

Hi @aeissa ,

You can do that by setting stripHtml: false, see here.

Cheers,

Colin

aeissa

Hi @colin,

Thanks for pointing me toward that option, I didn't discover that in the documentation previously.

I tried it out with both CSV and Excel buttons. The downloaded cell is:

<a href="www.my-download-link.com">Download</a>

rather than:

Download

which is a step in the right direction, but I'm looking to just download the value of href, which is "www.my-download-link.com" and not the entire HTML string.

Does it seem like I'm looking for customization that isn't provided for by this library? If so, I'll attempt to write my own JS solution and just use DataTables for the generic presentation.

Thanks!

colin

Hi @aeissa ,

For that, there's two approaches.

Either, you'll need orthogonal data to modify the data going into the export. See this example, it's for PDF, but the myExport approach would apply for you.

Or you can modify the data in the export once it's been made, see an example here that navigates the doc and changes the Excel cells.

Cheers,

Colin

aeissa

Hi @colin,

Thanks for the pointer. I've attempted to follow the example for orthogonal data here.

My goal was to modify the exported data by searching for the text of the linked table cell while replacing it (when downloaded) with the value of the href attribute. Unfortunately it seems I'm still missing something. Curious if you see any glaring errors?

<table id='tableDownload'>
<thead>
    <tr>
        <th id="column_one">Header 1</th>
        <th id="column_two">Header 2</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td><a id="link" href="https://www.example.com">Val 1</td>
        <td>Val 2</td>
    </tr>
</tbody>
</table>

<script type="text/javascript">

$(document).ready( function() {
    $('#tableDownload').DataTable({
        dom: 'Bfrtip',
        columns: [
            {data: 'Header 2'},
            {data: 'Header 1', render: function (data, type, row) {
                return type === 'export' ?
                    data.replace( /Val 1/g, $('#link').attr('href')):
                    data;
            }}
        ],
        buttons: [
        {
            extend: 'csv',
            exportOptions: {orthogonal: 'export'}
        }]
    });
});


</script>

colin

Hi @aeissa ,

I think you just need to change line 25:

data.replace( /Val 1/g, $('#link').attr('href')):

to be

$(data).attr('href')

and I think it should work.

Cheers,

Colin