I'm looking to have export functionality on a webpage using datatables. My table structure is as follows:
<table id="data-table" class="display table" width="100%">
<thead>
<tr>
<th colspan="4" class="center-align solid-left-border" style="border-bottom: none; text-decoration: underline; text-transform: uppercase; padding: 5px 18px;">
Tier 2 Contributions Report
</th>
</tr>
<tr>
<th class="left-align solid-left-border" style="border-bottom: none; text-decoration: none; text-transform: uppercase; font-weight: normal; font-weight: normal; padding: 5px 18px; font-size: 12.5px">
Employer's FIle No/Registration No:
</th>
<th colspan="3" class="left-align solid-left-border" style="border-bottom: none; font-weight: normal; padding: 5px 18px; font-size: 12.5px; text-transform: uppercase;">
<%= company.getSSNITRegistration() || '-' %>
</th>
</tr>
<tr>
<th class="left-align solid-left-border" style="border-bottom: none; text-decoration: none; text-transform: uppercase; font-weight: normal; padding: 5px 18px; font-size: 12.5px;">
Name of Employer:
</th>
<th colspan="3" class="left-align solid-left-border" style="border-bottom: none; font-weight: normal; padding: 5px 18px; font-size: 12.5px; text-transform: uppercase;">
<%= company.getName() || '-' %>
</th>
</tr>
<tr>
<th class="left-align solid-left-border" style="border-bottom: none; text-decoration: none; text-transform: uppercase; font-weight: normal; padding: 5px 18px; font-size: 12.5px;">
Address of Employer:
</th>
<th colspan="3" class="left-align solid-left-border" style="border-bottom: none; font-weight: normal; padding: 5px 18px; font-size: 12.5px; text-transform: uppercase;">
<%= company.getAddress() || '-' %>
</th>
</tr>
<tr>
<th colspan="4" style="border-bottom: none;"></th>
</tr>
<tr>
<th class="left-align">Social Sec. No.</th>
<th class="left-align">Full Name</th>
<th class="center-align">Basic Salary</th>
<th class="right-align">Contribution (5%)</th>
</tr>
</thead>
<tfoot>
<tr>
<th colspan="2" class="left-align">Totals</th>
<th class="center-align"><%= addCommas(totals.basicSalary) %></th>
<th class="right-align"><%= addCommas(totals.contribution) %></th>
</tr>
</tfoot>
<tbody>
<% employees.forEach(function(employee) { %>
<tr>
<td class="left-align"><%= employee.ssnitNumber %></td>
<td class="left-align"><%= employee.lastName + ', ' + employee.firstName + ' ' + employee.otherNames%></td>
<td class="center-align"><%= addCommas(employee.basicSalary) %></td>
<td class="right-align"><%= addCommas(employee.contribution) %></td>
</tr>
<% }) %>
</tbody>
</table>
and js:
$('#data-table').DataTable( {
"bPaginate": true,
"bLengthChange": true,
"bFilter": true,
"bSort": false,
"bInfo": true,
"bAutoWidth": false,
"dom": 'Bfrtip',
"buttons": [
'copy', 'csv', 'excel', 'pdf', 'print'
]
});
Though exports work, for some reason only the last part of the header gets exported:
<tr>
<th class="left-align">Social Sec. No.</th>
<th class="left-align">Full Name</th>
<th class="center-align">Basic Salary</th>
<th class="right-align">Contribution (5%)</th>
</tr>
I've tried playing around with exportOptions, but not much luck there, and moreover, headers are exported by default.
I'd appreciate any help, thanks :)