数据表打印复杂标题打印预览 [英] datatable print complex header print preview
本文介绍了数据表打印复杂标题打印预览的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
您好，我正在使用datatable及其出色的功能，但是我在复杂的标头中遇到了这样的问题
< thead>< tr>< td>一些文本</td></tr>< tr>< td>一些文本</td></tr></thead> 现在在显示页面时是这样的当我点击打印预览时，我会得到这样的结果
thead 中的第一个 tr 不见了我打开了datatable.js文件，发现了
var addRow = function(d，tag){var str ='< tr>';;对于(var i = 0，ien = d.length; i< ien; i ++){//null和undefined在打印输出中没有用var dataOut = d [i] === null ||d [i] ===未定义?'':d [i];var classAttr = columnClasses [i]?'class ='+ columnClasses [i] +'"':'';str + ='<'+ tag +''+ classAttr +'>'+ dataOut +'</'+ tag +'>';}返回str +'</tr>';};//构造用于打印的表var html ='< table class ='+ dt.table().node().className +'">';;html + ='< thead>';;//在页面上添加徽标(打印时每页重复)if(config.repeatingHead.logo){var logoPosition =([['left'，'right'，'center'].indexOf(config.repeatingHead.logoPosition)> 0)吗?config.repeatingHead.logoPosition:'正确';html + ='< tr>< th colspan ='+ data.header.length +'" style ="padding:0; margin:0; text-align:'+ logoPosition +';">< img样式='+ config.repeatingHead.logoStyle +'" src ='+ config.repeatingHead.logo +'"/></th></tr>';;}//添加标题(打印时每页重复)if(config.repeatingHead.title){html + ='< tr>< th colspan ='+ data.header.length +'">'+ config.repeatingHead.title +'</th></tr>';;}如果(config.header){html + = addRow(data.header，'th');}html + ='</thead>';;html + ='< tbody>';;对于(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>'; 及其仅在thead中添加最后一个tr但我无法将第一张tr与印刷预览非常感谢
这是一个jsfiddle ex当您预览表格时，该表格在thead中显示为拖曳行但在打印预览中，它只能在广告中的tr上显示
CSS
表{宽度:300像素；font-size:17px;}桌子，th，td{边框:实心1px #DDD；边界崩溃:崩溃；填充:2px 3px;文本对齐:居中；} 桌子{宽度:300像素；font-size:17px;}桌子，th，td{边框:实心1px #DDD；边界崩溃:崩溃；填充:2px 3px;文本对齐:居中；} HTML
< div id ="print-window">< table id ="example" class ="display" style ="width:100％">< thead>< tr>< th rowspan ="2">名称</th>< th colspan ="2"> HR信息</th>< th colspan ="3"> Contact</th></tr>< tr><位置>/th< thal薪水< th>< th>办公室</th>< th> Extn.</th>< th>电子邮件</th></tr></thead>< tbody>< tr>< td>老虎尼克松< td>< td>系统架构师</td>< td> $ 320,800</td>< td>爱丁堡</td>< td> 5421</td>< td> t.nixon@datatables.net</td></tr>< tr>< td> Garrett Winters</td>< td>会计</td>< td> $ 170,750</td>< td>东京</td>< td> 8422</td>< td> g.winters@datatables.net</td></tr>< tr>< td> Ashton Cox</td>< td>初级技术作者</td>< td> $ 86,000</td>< td>旧金山</td>< td> 1562</td>< td> a.cox@datatables.net</td></tr>< tr>< Cdric Kelly< td>< td>高级JavaScript开发人员</td>< td> $ 433,060</td>< td>爱丁堡</td>< td> 6224</td>< td> c.kelly@datatables.net</td></tr></tbody>< tfoot>< tr>< th>名称</th><位置>/th< th>薪金< th>< th>办公室</th>< th> Extn.</th>< th>电子邮件</th></tr></tfoot></table></div><输入type ="button" value =打印" onclick ="pdf()"/> JavaScript
功能pdf(){让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:塌陷;";style = style +"padding:2px 3px; text-align:center;}";样式=样式+</style>";let win = window.open(''，''，'height = 700，width = 700');win.document.write('< html>< head>');win.document.write('< title>个人资料</title>');win.document.write(样式);win.document.write('</head>');win.document.write('< body>');win.document.write(t);win.document.write('</body></html>');win.document.close();win.print();} 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 || 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
解决方案
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();
}
这篇关于数据表打印复杂标题打印预览的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
