时间戳

首页 > 解决方案 > 数据表打印复杂标题打印预览

javascript - 数据表打印复杂标题打印预览

问题描述

嗨，我正在使用数据表，它很棒，但我遇到了像这样的复杂标题中的问题

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

现在在显示页面时就像这样 在此处输入图像描述 当我点击打印预览时我得到这样的结果 在此处输入图像描述

第一个已经消失tr了，thead我打开了 datatable.js 文件，我发现了这个

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

它只是在tad中添加最后一个tr，但我无法将第一个tr与打印预览一起放置，非常感谢

这是一个 jsfiddle ex，当您预览表格时，它在 thead 的拖行显示，但在打印预览中，它仅在 thead 的 tr 上显示

在此处输入链接描述

标签： javascripthtmldatatable

解决方案

正如Datatables 网站的本主题中所讨论的，此功能尚不可用。

推荐阅读