Exporting data with Buttons and Responsive extensions, controlled by Column visibility.

Blitz35

I would like to combine Column visibility with Exporting and Responsiveness.
I have a large table with 15 columns. I would like to export only the selected ones. The problem is, some of the selected columns are invisible due to Responsiveness.

My goal:
Export to CSV the selected cols (random 10 are selected).

Results:

Default options:
All of the 15 columns are exported.

Columns: ':visible'
Only the first 5 selected is exported, the following 5 are hidden because of responsiveness.

How can I make Datatable export recognise the selected columns with "Column visibility"?

Thanks,
Blitz

kthorngren

This example shoes using column selectors for exporting:
https://datatables.net/extensions/buttons/examples/html5/columns.html

It shows using an array of columns. But it also references using column-selector. The choice of which column-selector is dependent on your environment.

Kevin

Blitz35

So the key to my problem will be the appropriate use of column-selector.
How can I select only the columns enabled by Column visibility?

If I export with :visible, it hides some of the columns enabled by Column visibility, because it is physically hidden by Responsive extension

Blitz35

Okay, Im getting closer.

I was able to export columns set visible by Column visibility but hidden by Responsiveness.

exportOptions: {
  columns: function(idx, data, node) {
    return $('#products').DataTable().column( idx ).visible();
  }
}

Now I have to make it clearer and global by leaving out $('#products').DataTable() and using something which refers to the current table.

lenamtl

have you found a solution?

montulli

I figured out a way to do it. The id of the table is reflected into the node tag if you are using aria controls.

exportOptions: {
     columns: function ( idx, data, node ) {
         var table_id = node.getAttribute('aria-controls');
          return $('#' + table_id).DataTable().column( idx ).visible();
      }
}

Joyrex

I think this is actually a bug, since column visibility and responsiveness are two different things, with different application scenarios.

A column being hidden due to the size of the viewport should have nothing to do whether or not it is part of the export to Excel.

colin

Hi @Joyrex ,

As shown in this example here, Responsive and the Excel export work fine together - all columns are exported regardless of the Responsive hiding. The issue with this thread is when you add column visibility into the mix.

Cheers,

Colin

Joyrex

@colin,

I figured out what was causing my issue - on my Excel exportOptions, I had visible: true set, so it was excluding the columns that were not visible due to Responsive kicking in. It forced me to not use the column visibility plugin due to this.

itajackass

Any solution on it? It's a problem also for me.... I need to export only columns affected by Column visibility to true, also if my responsiveness hide me it.
For example: I set column visibility to true on columns: 0,1,2,3,4,5,6
Column 7 is always show with noVis class (it contain buttons) and I don't want to export it (column 7 with class .noVis and .actions).
But my screen is small and I can see only columns 0,1,2,3,7
When I click Export I want to export all columns 0,1,2,3,4,5,6 (but not 7).
Using this:
exportOptions: {
columns: [ ':visible:not(.actions)' ]
}
doesn't work cause responsiveness

colin

Hi @itajackass ,

This thread was resolved, there was a solution. If you're seeing problems, could you link to a test case please that demonstrates the problem. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

itajackass

hi @colin ,
of course here my example: http://live.datatables.net/dofezuxa/3/edit

1. Column named OPTIONS will never be exported and never can be hidden by Column Visibility Button (this goal is done using class .noVis)
2. If width of the screen is **large **and responsive plugin is **not **fired (all columns can be visible on the screen) and I click EXPORT, all works as expected
3. If width of the screen is **large **and responsive plugin is **not **fired, and I choose column Visibility for example to hiding column POSITION, and I click EXPORT, all works as expected (all column are exported, but not POSITION and OPTIONS of course)
4. BUT If width of the screen is small, and responsive plugin **is **fired (in the case I can see in browser only 3 columns , for example: NAME, POSITION, OPTIONS), and I click EXPORT, I get exported only column visible by responsive plugin (except columns with class .noVis of course) and not visible by column visibility plugin rules...so I get exported only NAME and POSITION....but I want to get exported ALL columns except OPTIONS in this case!!..............My goals in this last case is to export only columns visible by COLUMN VISIBILITY plugin and not by RESPONSIVE PLUGIN.

If I try to remove :visible from the exportOptions I get exported always ALL column even if I chose to hide some columns by COLUMN VISIBILITY plugin.

colin

Hi @itajackass ,

I combined @montulli 's fix with your test case, to give this here. The key is to make the buttons.exportData() a bit smarter -

exportOptions: {
    columns: function(idx, data, node) {
        if ($(node).hasClass('noVis')) {
            return false;
        }
        return $('#example').DataTable().column(idx).visible();
    }
}

Cheers,

Colin

itajackass

Hi @colin , thanks for the reply! Your solution works as expected. I've only a question: cause i've to insert this fix on all my pages with datatables....about 40 pages... and each tables has a different name instead "example".
Is there a global code instead: return $('#example').DataTable().column(idx).visible();

For example: return $('this').DataTable().column(idx).visible(); ?
Thanks

colin

Hi @itajackass ,

It looks like this is the window object, so that's no good, but if the table being export is the only table on the page, you could use

return $('table').DataTable().column(idx).visible();

Cheers,

Colin

itajackass

Hi @colin, no, sometimes there are multiple table in the same page...
i've tried also: return $(node).closest("table").DataTable().column(idx).visible(); with no lucky.

Let me know if there's a solution or i've to copy/paste name of id table in each of my pages. Thanks

colin

Hi @itajackass ,

Yep, if it's not visible, it won't be in a table so you need to do this:

                tableID = $(node).closest('table').attr('id');
                return tableID === undefined? false : $(tableID).DataTable().column(idx).visible();

Cheers,

Colin