Question

我正在使用这个带有TableTools扩展名的jQuery Datatables，除了打印东西外，一切正常。

我的页面上有一个侧边栏，所以当我点击“打印”时，侧边栏会包含在打印视图中，这不太好，所以我在“打印”按钮上的点击事件被触发时隐藏它但是我不知道如何再次恢复侧边栏

我可以使用.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 打印视图将退出时）以便我可以显示我的侧边栏？

Answer 1

TableTools扩展程序向DTTT_Print元素添加了一个特殊的类<body>（reference），请参阅this example。要隐藏具有类sidebar-toggle的元素，请将以下规则添加到CSS文件中。

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

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

第一条规则将在TableTools打印预览模式中隐藏.sidebar-toggle。如果在不使用TableTools打印预览模式的情况下打印页面，则第二条规则将确保隐藏.sidebar-toggle。

您不必使用show() / hide()通过JavaScript显示/隐藏元素，CSS规则会处理此问题。您的JavaScript代码可以更改如下：

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

Answer 2

使用以下两个功能：

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

您的打印功能已准备就绪。

Answer 3

您可以使用媒体查询来设置一些仅适用于打印的CSS，例如：

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

如何自定义DataTables TableTools打印预览页面

3 个答案: