Как настроить страницу предварительного просмотра печати DataTables TableTools

Я использую этот замечательный jQuery Datatables с расширением TableTools, и все работает отлично, за исключением печати.

У меня есть боковая панель на моей странице, поэтому, когда я нажимаю «Печать», боковая панель включается в представление для печати, что не очень хорошо, поэтому я скрываю ее, когда запускается событие щелчка на кнопке «Печать», но я не знать, как восстановить боковую панель снова

Я могу использовать .show() и .hide(), но я просто не знаю, где поймать событие, когда кто-то выходит из режима печати (нажатие Esc отключает режим печати).

Ниже приведен код, который я пробовал:

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

});

Как отловить событие, при котором режим печати отключен (при нажатии Esc режим печати завершится), чтобы я мог снова показать свою боковую панель?


javascript jquery datatables datatables-1.10
person Juliver Galleto    schedule 12.07.2015    source источник
comment
Можете ли вы открыть представление для печати в новом окне (со скрытым всем, что должно быть скрыто) и сохранить исходную страницу с боковыми панелями? Таким образом, вам не нужно следить за закрытием режима печати, поскольку это не влияет на исходную страницу.   -  person jonmrich    schedule 13.07.2015

Ответы (3)


arrow_upward
1
arrow_downward

Расширение TableTools добавляет специальный класс DTTT_Print (ссылка) к элементу <body>, см. этот пример. Чтобы скрыть элемент с классом sidebar-toggle, добавьте в свой файл CSS следующие правила.

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

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

Первое правило будет скрывать .sidebar-toggle в режиме предварительного просмотра печати TableTools. Второе правило гарантирует, что .sidebar-toggle будет скрыто, если страница печатается без использования режима предварительного просмотра печати TableTools.

Вам не нужно показывать/скрывать элементы через JavaScript с помощью show()/hide(), об этом позаботятся правила CSS. Ваш код JavaScript может быть изменен следующим образом:

$(".test_print").click(function(){
    $(".DTTT_button_print").trigger("click"); //trigger the click event
});
person Gyrocode.com    schedule 13.07.2015

arrow_upward
1
arrow_downward

Используйте следующие две функции:

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

Ваша функция печати готова.

person Prasad Shetty    schedule 27.12.2016

arrow_upward
0
arrow_downward

Вы можете использовать медиа-запросы, чтобы установить некоторые CSS, которые будут применяться только к отпечаткам, например:

@media print {
  .sidebar-toggle { display: none !important; } 
}
person alan0xd7    schedule 12.07.2015
comment
Вы использовали .sidebar-toggle правильно? Поскольку это, кажется, ваш настоящий класс для вашей боковой панели. - person alan0xd7; 12.07.2015
comment
Возможно, вы можете взглянуть на эту статью. о том, как прослушивать события печати, он также использует медиа-запросы. - person alan0xd7; 12.07.2015
comment
Кроме того, вам нужно удалить $(".sidebar-toggle").hide();, так как CSS сделает все за вас. - person alan0xd7; 12.07.2015
comment
я даже пытался настроить фон на красный, но, к сожалению, все еще не работает - person Juliver Galleto; 13.07.2015
comment
Куда вы поместили @media print CSS? Вы должны поместить их в конце всех других стилей CSS. - person alan0xd7; 13.07.2015
comment
Кроме того, изменение будет видно только в окне предварительного просмотра печати. - person alan0xd7; 13.07.2015