DataTable, export to pdf does not work properly with two headers and colspan

I am using datatable to display my data and I want to export it to pdf.

I followed the steps listed in the example provided in this link .

I have a table in which I want two headers and two headers, one header has colspan, i.e. as below

<th colspan=3> 

So, when I try to export a table to pdf, it gives me only one heading and also has a full description of the column. My code snippet with all the necessary css nd js files is as follows:

 <link href="https://cdn.datatables.net/1.10.11/css/dataTables.bootstrap.min.css" rel="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"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.12.0.min.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.1.2/js/dataTables.buttons.min.js"></script> <script type="text/javascript" src="http://cdn.datatables.net/buttons/1.1.2/js/buttons.flash.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script> <script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script> <script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.1.2/js/buttons.html5.min.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.1.2/js/buttons.print.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#dataTable').DataTable( { dom: 'Bfrtip', buttons: [ 'copy', 'csv', 'excel', 'pdf', 'print' ] } ); } ); </script> <table id="dataTable" cellspacing="0" width="auto"> <thead> <tr> <th colspan = 3></th> <th colspan = 3>IMP values</th> </tr> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </thead> <tbody> <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>$320,800</td> </tr> <tr> <td>Garrett Winters</td> <td>Accountant</td> <td>Tokyo</td> <td>63</td> <td>2011/07/25</td> <td>$170,750</td> </tr> </tbody> </table> 

The figure below shows how the table is displayed in the browser Browser table

Below is the image that is visible after exporting to pdf Shows image of exported pdf file

So how can I get two headers in pdf using datatable?

Thanks in advance.

+5
source share

Source: https://habr.com/ru/post/1247005/


All Articles