Printable DataTable Google Visualizations

Question

I have a custom routing application that takes route information from google maps. He then creates a DataTable to visualize Google for all steps of the route.

My current problem is that to reduce overflow for very large routes, I turned on paging in the DataTable options. This results in a different print version, since only part of the data shown in the table will be printed. Other parts of the table are loaded dynamically by the API when the prev and next buttons are clicked.

Is there such a difficult way to get a DataTable to be printer friendly when the time comes without sacrificing the ability to enable paging?

Answer 1

That is how I decided to solve this problem. I will not accept my own answer if someone has something more elegant.

I initially had:

var visualization = new google.visualization.Table(document.getElementById('table'));
visualization.draw(data, {
    sort: "disable",
    allowHtml: true,
    showRowNumber: true,
    page: "enable",
    pageSize: 9
});

I added another one that went to a div, which I will hide with css.

//Create a second Visualization that Will be hidden.
   var visualization = new google.visualization.Table(document.getElementById('printerFriendly'));
visualization.draw(data, {
    sort: "disable",
    allowHtml: true,
    showRowNumber: true,
    page: "disable"
});

Then I added the following rules to one of my css files.

 @media print  
    {
        #table{ display:none; }
    }
 @media screen
    {
         #printerFriendly{ display:none;}
    }

This hides one table during normal use and hides another during printing. I was hoping for something a little cleaner than this, but this solution was very easy to implement.

Answer 2

There are several ways to do this.

If the changes you need to make the page “printer friendly” can be made simply by changing the CSS style, then all you have to do is add another stylesheet for the print medium:

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

: , , .

, , ..., , .

, , , , ... CSS .

( ), , .., . ​​