Many of you may or may not be aware of a javascript code that is capable of printing page content.
We had created a report which looked something similar to the one shown below.
Notice that there are two columns that display "No" in orange colour. We want to print the report, but we do not want the "NO" columns to be printed on paper.
jQuery has a simple command which can hide any number of cells based on their class names. That command to hide a class is given below.
This command was given in the jQuery code, to be called when the print command was called.
Let us assume that we gave the classname "noprint" to all those cells in those two columns, which we do not want to print.
In the code loop, we added an additional classname called "noprint" to the content, like so.
If you see, the class "noprint" has been added. Now, when I give the command
All cells that need to be hidden, have to be given the classname "noprint".
All those cells that have noprint class in them are hidden from view.
We are using "class" and not "id" because of obvious reasons, the reasons being the "id" can appear only once in an entire page.
Now, the Print command may be used to call the system's print dialogue and get our page printed. See below for the code.
Solved.
We had created a report which looked something similar to the one shown below.
Notice that there are two columns that display "No" in orange colour. We want to print the report, but we do not want the "NO" columns to be printed on paper.
Hiding columns from a table using jQuery
jQuery has a simple command which can hide any number of cells based on their class names. That command to hide a class is given below.
This command was given in the jQuery code, to be called when the print command was called.
Let us assume that we gave the classname "noprint" to all those cells in those two columns, which we do not want to print.
In the code loop, we added an additional classname called "noprint" to the content, like so.
If you see, the class "noprint" has been added. Now, when I give the command
All cells that need to be hidden, have to be given the classname "noprint".
All those cells that have noprint class in them are hidden from view.
We are using "class" and not "id" because of obvious reasons, the reasons being the "id" can appear only once in an entire page.
Printing using the system dialogue from web application
Now, the Print command may be used to call the system's print dialogue and get our page printed. See below for the code.
Solved.
No comments:
Post a Comment