How to customize DataTables TableTools print preview page

Question

I'm using this great jQuery Datatables with TableTools extension and everything works just fine except for print thing.

I have a sidebar on my page so when I click "Print", the sidebar is included on the print view which not good so what I did is hide it when the click event on the "Print" button is triggered but I don't know how to restore the sidebar again

I can use .show() and .hide() but I just don't know where to catch the event where someone exit on the print view (pressing Esc will make the print view off).

Below code is what I tried:

$(document).ready(function(){

//initialize datatables
$('#test_table').dataTable( {
    "dom": 'T<"clear">lfrtip',
    "tableTools": {
        "sSwfPath": "/../../../plugins/datatables/extensions/TableTools/swf/copy_csv_xls_pdf.swf"
    }
} );
    //when they click the custom button that has a class of 'test_print' then trigger the datatables table tools button with a class of 'DTTT_button_print'
    $(".test_print").click(function(){
        $(".sidebar-toggle").hide(); //hide the sidebar
        $(".DTTT_button_print").trigger("click"); //trigger the click event
    });

});

How to catch the event where print view is turned off (when pressing Esc the print view will exit) so that I could show my sidebar back?

Can you have the print view open in a new window (with everything hidden that needs to be hidden) and keep the original page with the sidebars? This way you don't have to watch when the print view is closed since it doesn't affect the original page. — jonmrich
– jonmrich, Commented Jul 13, 2015 at 12:34

Gyrocode.com · Accepted Answer · 2015-07-13 15:52:20Z

1

TableTools extension adds a special class DTTT_Print (reference) to the <body> element, see this example. To hide an element with class sidebar-toggle add the following rules to your CSS file.

body.DTTT_Print .sidebar-toggle { display: none !important; } 

@media print {
 .sidebar-toggle { display: none !important; } 
}

First rule will hide .sidebar-toggle in TableTools print preview mode. Second rule will ensure that .sidebar-toggle is hidden if the page is printed without using TableTools print preview mode.

You don't have to show/hide elements via JavaScript with show()/hide(), CSS rules will take care of that. Your JavaScript code could be changed as follows:

$(".test_print").click(function(){
    $(".DTTT_button_print").trigger("click"); //trigger the click event
});

edited Jul 13, 2015 at 15:52

answered Jul 13, 2015 at 15:20

Gyrocode.com

59k16 gold badges157 silver badges192 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Meyer · Accepted Answer · 2016-12-27 08:52:07Z

Use the following two functions:

function CreateTableFromObject(tblObj) {
    objHeader = JSON.parse(JSON.stringify(tblObj.buttons.exportData()))["header"];
    objRows = JSON.parse(JSON.stringify(tblObj.buttons.exportData()))["body"];

    //Check If Action Exists in Table and remove it
    var index = objHeader.indexOf('Action');
    if (index > -1) {
        objHeader.splice(index, 1);
    }

    tblToPrint = "<table style='border: 1px solid black; border-collapse: collapse;'><thead><tr>";
    $.each(objHeader, function (key, value) {
        tblToPrint += "<th style='border: 1px solid black;'>" + value + "</th>";
    });
    tblToPrint += "</tr></thead><tbody>";
    $.each(objRows, function (key, value) {
        tblToPrint += "<tr>";
        //If action exists then decrease target by 1
        if (index > -1) {
            target = value.length - 1;
        }else {
            target = value.length;
        }
        for (var i = 0; i < target; i++) {
            tblToPrint += "<td style='border: 1px solid black;'>" + value[i] + "</td>";
        }
        tblToPrint += "</tr>";
    });
    tblToPrint += "</tbody></table>";
    return tblToPrint;
}

function PrintWindowAddParts() {
        var tblObj = $("#YourTable").DataTable();
        var tblViewRMA = CreateTableFromObject(tblObj);
        var printContents = "<div class='dataTables_wrapper form-inline dt-bootstrap'>" + tblViewRMA + "</div>";
        var size = 'height=' + $(window).height() + 'px,width=' + $(window).width() + 'px';
        var mywindow = window.open('', 'PRINT', size);
        mywindow.document.write('<html><head><title>' + "My Title" + '</title>');
        mywindow.document.write('</head><body >');
        mywindow.document.write('<h4>' + "My Title" + '</h4>');
        mywindow.document.write(printContents);
        mywindow.document.write('</body></html>');
        mywindow.document.close();
        mywindow.focus();
        mywindow.print();
        mywindow.close();
        return true;
}

Your Print function is ready.

Gyrocode.com · Accepted Answer · 2015-10-01 16:36:58Z

0

You can use media queries to set some CSS that will only apply to prints, for example:

@media print {
  .sidebar-toggle { display: none !important; } 
}

edited Oct 1, 2015 at 16:36

Gyrocode.com

59k16 gold badges157 silver badges192 bronze badges

answered Jul 12, 2015 at 5:50

alan0xd7

1,8511 gold badge16 silver badges21 bronze badges

6 Comments

alan0xd7 Over a year ago

You used .sidebar-toggle right? As that seems to be your actual class for your sidebar.

alan0xd7 Over a year ago

Perhaps you can take a look at this article on how to listen to print events, it also uses media queries.

alan0xd7 Over a year ago

Also, you need to remove $(".sidebar-toggle").hide(); as CSS will do all the hiding/showing for you.

Juliver Galleto Over a year ago

i even tried setting up the background to red yet sadly, still not working

alan0xd7 Over a year ago

Also, the change would only be visible in the print preview window.

|

Collectives™ on Stack Overflow

How to customize DataTables TableTools print preview page

3 Answers 3

Comments

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related