Question

I have a custom routing application that takes information for a route from google maps. It then creates a Google Visualizations DataTable to hold all the steps in the route.

My current problem is that in order to reduce overflow for very large routes, I have enabled paging in the options of the DataTable. This leads to a not so printer friendly version because only the portion of the data that is shown in the table will be printed. The other portions of the table are loaded dynamically by the API when you click prev and next.

Is there a not so hard way to get the DataTable to be printer friendly when it comes time without sacrificing the ability to have paging enabled?

Answer 1

This is the way that I ended up solving this problem. I will not accept my own answer just in case someone has something much more elegant.

Originally I 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 that I would 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 the other during printing. I was hoping for something a little cleaner than this but this solution was very easy to implement.