DataTables Print button not working, prints a blank page

Question

I'm working on a project that uses the DataTables plug in to construct a table of words from a database. This is the function I use to create my table.

var word_data_filtered = filterWordData(filter_states);
words_table = $("#words_generated").DataTable({
    "data" : word_data_filtered,
    "columns" : columns,
    "aLengthMenu": [[25, 50, 100, 200, -1],
            [25, 50, 100, 250, "All"]],
    "pageLength": 100,
    dom: "lBftipr",
    buttons: [
       'print',
    ]
});

Buttons are an additional plugin/add-on to DataTables. So I'm actually going to copy and paste a major chunk of the various scripts that I include in the head of my file, partly because if I am missing something I'd like to know.

  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
 <script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js">
 </script>
 <script src="//cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.css"></script>
 <script src="//cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.js"></script>
 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
 <link rel="stylesheet" href="https://cdn.datatables.net/tabletools/2.2.4/css/dataTables.tableTools.min.css"/>
 <script src="https://cdn.datatables.net/tabletools/2.2.4/js/dataTables.tableTools.min.js"></script>
 <script src="https://cdn.datatables.net/tabletools/2.2.4/swf/copy_csv_xls_pdf.swf"></script>

 <script src="https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js"></script>
 <script src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.print.min.js"></script>

So now I have a "print" button that displays on the page. But in my chrome browser, the print button doesn't work.

Upon clicking it, a new tab opens with google chrome's printing panel set on top of a table. However, the printing panel prompts you to print a blank page. The preview of the print shows a blank page (well, there's a header at the top and that's it) The table under the printing panel looks exactly like the table on my web page, so I'm assuming that I've made it some of the way to actually printing out the entire table.

But still. I don't really know why this is happening and I'm unsure how to proceed further

Answer 1

The print view button will take a copy of the data displayed in a table (based on the selector options given in the exportOptions parameter) and construct a new, temporary, table that is shown in a new window.

I think you might need to specify exportOptions in order to instruct the print button what table data it should print.

https://datatables.net/reference/button/print

Answer 2

I ran into the same problem, and it turned out that in the new page it opens, you have all CSS from parent page. In my CSS I found this definition that would hide everything for print:

@media print {
  body * {
    visibility: hidden;
  }