Styjun

hi im working with datatable and its great but i have problem thats in complex header like this

<thead>
 <tr><td>some text</td></tr>
 <tr><td>some text</td></tr>
</thead>

now in showing page its like like this

when i hit print preview i gat result like this

that the first tr in thead is gone
i opened datatable.js file and i found this

 var addRow = function ( d, tag ) 
 var str = '<tr>';

 for ( var i=0, ien=d.length ; i<ien ; i++ ) 
 // null and undefined aren't useful in the print output
 var dataOut = d[i] === null 

 return str + '</tr>';
 ;

 // Construct a table for printing
 var html = '<table class="'+dt.table().node().className+'">';

 html += '<thead>';

 // Adding logo to the page (repeats for every page while print)
 if(config.repeatingHead.logo) 
 var logoPosition = (['left','right','center'].indexOf(config.repeatingHead.logoPosition) > 0) ? config.repeatingHead.logoPosition : 'right';
 html += '<tr><th colspan="'+data.header.length+'" style="padding: 0;margin: 0;text-align: '+logoPosition+';"><img style="'+config.repeatingHead.logoStyle+'" src="'+config.repeatingHead.logo+'"/></th></tr>';
 

 // Adding title (repeats for every page while print)
 if(config.repeatingHead.title) 
 html += '<tr><th colspan="'+data.header.length+'">'+config.repeatingHead.title+'</th></tr>';
 

 if ( config.header ) 
 html += addRow( data.header, 'th' );
 

 html += '</thead>';

 html += '<tbody>';
 for ( var i=0, ien=data.body.length ; i<ien ; i++ ) 
 html += addRow( data.body[i], 'td' );
 
 html += '</tbody>';

 if ( config.footer && data.footer ) 
 html += '<tfoot>'+ addRow( data.footer, 'th' ) +'</tfoot>';
 
 html += '</table>';

and its just add the last tr in thead
but i couldn't put the first tr with print preview
thanks a lot

this is a jsfiddle ex
when you preview the table its showing with tow row at thead
but in print preview its showing only on tr in thead

enter link description here

You asked for a work-around and since it is already mentioned not a feature for Datatables at the moment. You could simply convert it to a PDF through grabbing only the tables contents. Then add styling for the print window without any libraries. It really is just a window.

It is just a matter of injecting the right style before loading the window. So we just need to make sure we grab the style outputted by datatables and inject that.

CSS

 table
 
 width: 300px;
 font-size: 17px;
 
 table, th, td
 
 border: solid 1px #DDD;
 border-collapse: collapse;
 padding: 2px 3px;
 text-align: center;
 table
 
 width: 300px;
 font-size: 17px;
 
 table, th, td
 
 border: solid 1px #DDD;
 border-collapse: collapse;
 padding: 2px 3px;
 text-align: center;
 

HTML

<div id="print-window">
 <table id="example" class="display" style="width:100%">
 <thead>
 <tr>
 <th rowspan="2">Name</th>
 <th colspan="2">HR Information</th>
 <th colspan="3">Contact</th>
 </tr>
 <tr>
 <th>Position</th>
 <th>Salary</th>
 <th>Office</th>
 <th>Extn.</th>
 <th>E-mail</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>Tiger Nixon</td>
 <td>System Architect</td>
 <td>$320,800</td>
 <td>Edinburgh</td>
 <td>5421</td>
 <td>t.nixon@datatables.net</td>
 </tr>
 <tr>
 <td>Garrett Winters</td>
 <td>Accountant</td>
 <td>$170,750</td>
 <td>Tokyo</td>
 <td>8422</td>
 <td>g.winters@datatables.net</td>
 </tr>
 <tr>
 <td>Ashton Cox</td>
 <td>Junior Technical Author</td>
 <td>$86,000</td>
 <td>San Francisco</td>
 <td>1562</td>
 <td>a.cox@datatables.net</td>
 </tr>
 <tr>
 <td>Cedric Kelly</td>
 <td>Senior Javascript Developer</td>
 <td>$433,060</td>
 <td>Edinburgh</td>
 <td>6224</td>
 <td>c.kelly@datatables.net</td>
 </tr>
 </tbody>
 <tfoot>
 <tr>
 <th>Name</th>
 <th>Position</th>
 <th>Salary</th>
 <th>Office</th>
 <th>Extn.</th>
 <th>E-mail</th>
 </tr>
 </tfoot>
 </table>
</div>
<input type="button" value="Print" onclick="pdf()" />

Javascript

function pdf() 
 let t = document.getElementById('print-window').innerHTML;

 let style = "<style>";
 style = style + "table width: 100%; font-size: 17px;";
 style = style + "table, th, td border: solid 1px #DDD; border-collapse: collapse;";
 style = style + "padding: 2px 3px;text-align: center;";
 style = style + "</style>";
 let win = window.open('', '', 'height=700,width=700');

 win.document.write('<html><head>');
 win.document.write('<title>Profile</title>');
 win.document.write(style);
 win.document.write('</head>');
 win.document.write('<body>');
 win.document.write(t);
 win.document.write('</body></html>');

 win.document.close();
 win.print();

As discussed in this topic from Datatables website, this feature is not yet available.