Problem with export in tabbed pages

I have a SPA application where I have problems to export data from some of the datatables. It seems to me that if the datatables are contained in different containers or pages they will work but i can't quite figure it out. For example a page
with a table like this

<div vxa-role="page" vxa-page="employees" vxa-init-function="EmployeeService.LoadEmployees()" vxa-show-function="EmployeeService.LoadEmployees()" class="collapse">
            <div class="container-fluid">
                <br>Behöriga tjänstemän<br>
                <table id="editEmployeeTable" class="table table-hover" cellspacing="0" width="100%">
                    <thead>
                        <tr>
                            <th>Namn</th>
                            <th>TjänstemannaNr</th>
                            <th>AnvändarId</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>

The export will work but not in a page like

<div class="tab-pane" id="car-tabber-herds" role="tabpanel">
                        <form id="editCarResponsibilityTableForm">
                            <div class="container-fluid">
                                <table id="editCarResponsibilityTable" class="table table-hover" cellspacing="0" width="100%">
                                    <thead>
                                        <tr>
                                            <th>SE-nummer</th>
                                            <th>Gårdsnamn</th>
                                            <th>Adress</th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                        </form>
                    </div>

Both tables use an editor and are initiated with similar code like below

employeeTable = $('#editEmployeeTable').DataTable({
            'language': {
                'url': '/js/language/datatables_swe.json'
            },
            'dom': 'Bfrtip',
            'buttons': [
                {
                    extend: 'collection',
                    text: 'Exportera',
                    buttons: [
                        'excel',
                        'pdf'
                    ]
                },
                //,
                { extend: "create", editor: editor },
                { extend: "edit", editor: editor },
                {
                    extend: "remove",
                    editor: editor,
                    formMessage: function (e, dt) {
                        var rows = dt.rows(e.modifier()).data().pluck('name');
                        return 'Är du säker på att du vill radera ' +
                            'följande tjänsteman(män)? <ul><li>' + rows.join('</li><li>') + '</li></ul>';
                    }
                }
            ],
            'lengthChange': false,
            'order': [1, 'asc'],
            'select': {
                style: 'single'
            },
            'columns': [

I'd be grateful for any suggestions as this is a real showstopper