Problem with export in tabbed pages
Problem with export in tabbed pages
NilsJ
Posts: 12Questions: 5Answers: 0
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
This discussion has been closed.
Answers
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
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
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
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.