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

【问题标题】：How to customize DataTables TableTools print preview page如何自定义 DataTables TableTools 打印预览页面
【发布时间】：2015-07-12 05:45:19
【问题描述】：

我正在使用这个很棒的 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

【解决方案1】：

TableTools 扩展为<body> 元素添加了一个特殊的类DTTT_Print (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
});

【讨论】：

【解决方案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;
}

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

你用过.sidebar-toggle 对吧？因为这似乎是您的侧边栏的实际课程。
或许你可以看看this article关于如何监听打印事件，它也使用媒体查询。
另外，您需要删除 $(".sidebar-toggle").hide();，因为 CSS 将为您完成所有隐藏/显示。
我什至尝试将背景设置为红色，但遗憾的是，仍然无法正常工作
此外，更改只会在打印预览窗口中可见。