Problem with export in tabbed pages

NilsJ

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

kthorngren

The export buttons are working with this example using Bootstrap tabs:
http://live.datatables.net/loluqeba/1/edit

I would first start by checking the browser's console for errors. If that doesn't help then please update my example or provide an example replicating the issue.

Kevin

NilsJ

I have checked your example and the major difference to my environment is the bootstrap version, see part of my gulp-file below:

paths.node + "datatables.net/js/jquery.dataTables.min.js",
paths.node + "datatables.net-bs4/js/dataTables.bootstrap4.js",
paths.node + "datatables.net-buttons/js/dataTables.buttons.min.js",
paths.node + "datatables.net-select/js/dataTables.select.min.js",
paths.node + "datatables.net-keytable/js/dataTables.keyTable.min.js",
paths.node + "datatables.net-buttons-bs4/js/buttons.bootstrap4.js",
paths.node + "jszip/dist/jszip.js",
paths.node + "pdfmake/build/pdfmake.js",
paths.node + "pdfmake/build/vfs_fonts.js",
paths.node + "datatables.net-buttons/js/buttons.html5.js",
paths.node + "datatables.net-keytable-bs4/js/keyTable.bootstrap4.js",
paths.vendor + "datatables-editor/datatables.editor.js",
paths.vendor + "datatables-editor/datatables.editor.min.js"

By the way there are no error messages visible in the developer tool in Chrome

kthorngren

The issue is specific to your environment. Please provide a link to your page or a test case replicating the issue so we can help debug.

Kevin

NilsJ

Thanks I will try to do something like that but it might take a while to set up an open URL from our environment or something like that.