javascript - datatable print complex header print preview - Stack Overflow

admin管理员组

文章数量:1327967

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

• javascript
• html
• datatable

Share Improve this question Follow edited Mar 26, 2019 at 19:31 Awar Pulldozer asked Mar 22, 2019 at 7:13 Awar PulldozerAwar Pulldozer 1,10177 gold badges2323 silver badges4343 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

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 3

As 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();
}

本文标签： javascriptdatatable print complex header print previewStack Overflow