hi im working with datatable and its great but i have problem thats in plex 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 || d[i] === undefined ?
'' :
d[i];
var classAttr = columnClasses[i] ?
'class="'+columnClasses[i]+'"' :
'';
str += '<'+tag+' '+classAttr+'>'+dataOut+'</'+tag+'>';
}
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
hi im working with datatable and its great but i have problem thats in plex 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 || d[i] === undefined ?
'' :
d[i];
var classAttr = columnClasses[i] ?
'class="'+columnClasses[i]+'"' :
'';
str += '<'+tag+' '+classAttr+'>'+dataOut+'</'+tag+'>';
}
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
Share Improve this question edited Mar 26, 2019 at 19:31 Awar Pulldozer asked Mar 22, 2019 at 7:13 Awar PulldozerAwar Pulldozer 1,1017 gold badges23 silver badges43 bronze badges 6- 4 Can you please add problem and solution that can be understood? – Varit J Patel Commented Mar 24, 2019 at 10:03
- 2 Can you create a stack snippet/jsFiddle to verify it? – Munim Munna Commented Mar 24, 2019 at 10:41
- i upload example on jsfiddle – Awar Pulldozer Commented Mar 26, 2019 at 19:31
- 1 @AwarPulldozer Do want exactly header and footer should be in print view right? – iyyappan Commented Mar 27, 2019 at 13:01
- yes thats what i want – Awar Pulldozer Commented Mar 27, 2019 at 15:39
2 Answers
Reset to default 3As discussed in this topic from Datatables website, this feature is not yet available.
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>[email protected]</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>$170,750</td>
<td>Tokyo</td>
<td>8422</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>$86,000</td>
<td>San Francisco</td>
<td>1562</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>$433,060</td>
<td>Edinburgh</td>
<td>6224</td>
<td>[email protected]</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();
}