www.webdeveloper.com
Results 1 to 4 of 4

Thread: how to print paginated pages using javascript

  1. #1
    Join Date
    Mar 2014
    Posts
    2

    how to print paginated pages using javascript

    Hello all

    i want to know how to print paginated pages using JavaScript.
    i have a report that has around 300 records so i made pagination from page 1 to 10
    and i have a button to print using window.print() ,but it only prints the records of the first page.

    how can i print the records in all pages , if there is a function using JavaScript .

    many thanks

  2. #2
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    969
    I would need more information to give you a complete solution but it seems like you have records that aren't being shown until you click on the appropriate page number (or possibly a 'next'/'prev' page button).

    The thing about the .print() method is that it trigger's the browsers default print functionality, which you can't control with javascript. Because of this, you can't tell it to print all of those records that aren't shown on the page.

    There are a couple of potential solutions though. In all cases, if you want these extra paginated records to print, you will have to put them somewhere on the page before calling 'window.print()'.

    Basically, let's say you have 10 pages, and each page is a <div>. The first <div> is the first page of records and it is shown by default. The additional 9 <div> elements are hidden. If you click to show page 2, the first <div> becomes hidden while the second <div> is now shown. Again, I don't know how you have your page set up so I have to take guesses until you supply more information, but if you have anything similar to this your solution is simple. You just need to set up a 'print.css' file which will contain CSS rules for when the page is printed. In this CSS file you can set those <div> elements to all be shown by default, which will allow all of the pages to show up on the printed page, but not your webpage.

    A print.css file would be included like so:
    HTML Code:
    <link href="/css/print.css" rel="stylesheet" media="print" type="text/css">
    Setting the 'media' attribute to print means that the CSS is only used when printing.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  3. #3
    Join Date
    Oct 2013
    Posts
    517
    Why not let the user's browser do the page-break for you?
    http://www.w3schools.com/cssref/pr_print_pagebi.asp

    This should break a page either before or after a record.

  4. #4
    Join Date
    Mar 2014
    Posts
    2
    Quote Originally Posted by Sup3rkirby View Post
    I would need more information to give you a complete solution but it seems like you have records that aren't being shown until you click on the appropriate page number (or possibly a 'next'/'prev' page button).

    The thing about the .print() method is that it trigger's the browsers default print functionality, which you can't control with javascript. Because of this, you can't tell it to print all of those records that aren't shown on the page.

    There are a couple of potential solutions though. In all cases, if you want these extra paginated records to print, you will have to put them somewhere on the page before calling 'window.print()'.

    Basically, let's say you have 10 pages, and each page is a <div>. The first <div> is the first page of records and it is shown by default. The additional 9 <div> elements are hidden. If you click to show page 2, the first <div> becomes hidden while the second <div> is now shown. Again, I don't know how you have your page set up so I have to take guesses until you supply more information, but if you have anything similar to this your solution is simple. You just need to set up a 'print.css' file which will contain CSS rules for when the page is printed. In this CSS file you can set those <div> elements to all be shown by default, which will allow all of the pages to show up on the printed page, but not your webpage.

    A print.css file would be included like so:
    HTML Code:
    <link href="/css/print.css" rel="stylesheet" media="print" type="text/css">
    Setting the 'media' attribute to print means that the CSS is only used when printing.
    yes you are right i have 10 pages each page is a div and i have next and back buttons to go through the pages like you said
    the problem is the contents of these records are dynamic i got them from the database according to the user input
    so i can't put the the div elements ,any simple solution thanks a lot for your help

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles