Отсутствующие данные заголовка после DataTables Экспорт Excel

Question

Я ищу, чтобы иметь функции экспорта на веб-странице с использованием данных. Моя структура таблицы выглядит следующим образом:

<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> 

и ЯШ:

$('#data-table').DataTable({ 
    "bPaginate": true, 
    "bLengthChange": true, 
    "bFilter": true, 
    "bSort": false, 
    "bInfo": true, 
    "bAutoWidth": false, 
    "dom": 'Bfrtip', 
    "buttons": [ 
    'copy', 'csv', 'excel', 'pdf', 'print' 
    ] 

}); 

Хотя экспорт работать, по какой-то причине только последняя часть заголовка получает экспортируемого:

<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 «Пробовал играть с exportOptions, но не так много удачи, и, кроме того, заголовки экспортируются по умолчанию.

Я был бы признателен за любую помощь, спасибо :)

Answer 1

Чтобы ответить на ваш вопрос его можно экспортировать любые данные (произвольный текст, изображения) с помощью функции экспорта данных таблицы с изменениями в декларации, как показано ниже.

table = $('#example').DataTable({ 
    "bProcessing" : true, 
    dom: 'Bfrtip', 
    buttons: [ 
     { 
      extend: 'pdfHtml5', 
      customize: function (doc) { 
       doc.content.splice(0, 0, { 
        text: "Add your custom data here" 
       }); 
      } 
     }, 
     'copyHtml5', 
     'excelHtml5', 
     'csvHtml5' 
    ] 
}); 

Для этого DOM элементов для работы мы должны включить ниже таблицы стилей и скрипты

//Stylesheet 
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css"> 
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.1.2/css/buttons.dataTables.min.css"> 

//Scripts 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script> 
<script src="https://cdn.datatables.net/buttons/1.1.2/js/dataTables.buttons.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script> 
<script src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script> 
<script src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script> 
<script src="https://cdn.datatables.net/buttons/1.1.2/js/buttons.html5.min.js"></script> 

Примечание: Как вы попросили для пользовательского экспорта заголовка в этом примере показано, как пройти пользовательские данные, которые мы предоставили в разделе «текст» (он не будет автоматически экспортировать ваши дополнительные заголовки).

Поэтому, пожалуйста, удалите свои первые заголовки, как «2-го уровня взносов Доклад» и держать их вне определение таблицы и добавить их значения в разделе «текст»

Я создал скрипку https://jsfiddle.net/Prakash_Thete/rbunuv9b/ для того же, пожалуйста, смотрите.