print one line on one page with javascript or jquery

Question

I had a code which runs in a loop and it should 5 tickets on one page when I try to print it..

I want to print one ticket on one page

I am lost how to do, I am trying the following code:

function Printticket()
{
        $('#print .ticket_new').each(function() {
            $(this).hide();
        });
        $('#print .ticket_new').each(function() {
            $(this).show();
            window.print();
        });
}

code is like this

<div id="print">
<loop from="1" to="10" index="k">
<div id="print_1" class="ticket_new>ticket1</div>
<div id="print_2" class="ticket_new>ticket2</div>
<div id="print_3" class="ticket_new>ticket3</div>
<div id="print_4" class="ticket_new>ticket4</div>
</loop>
</div>

Answer 1

Based on DA's suggestion , I created this:

 $('button').click(function() { $('button').hide(); $('li').each(function() { $(this).css({ "page-break-after": "always" }); }); window.print(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <ul> <li>ticket1</li> <li>ticket2</li> <li>ticket3</li> <li>ticket4</li> </ul> </div> <button>Print</button> 

Or check this fiddle .

This prints 4 tickets in 4 separate pages.

Answer 2

Put all your div in a separate hidden iframe (Adjust the size according to the page size) and print it.

HTML

<iframe id="print" name="print"></iframe>

JS

window.frames["print"].focus(); window.frames["print"].print();

EDIT: I just read Prabhu's comment, that's a good idea too.

Answer 3

Create n number of divs.

Set height and width of each div as height/width of window.

And content the ticket content in respective divs and take print.

Example :-

HTML:

<div id="print_1" class="ticket_new>ticket1</div>
<div id="print_2" class="ticket_new>ticket2</div>
<div id="print_3" class="ticket_new>ticket3</div>
<div id="print_4" class="ticket_new>ticket4</div>

JS:

for(var i=1;i<=4;i++)
{
$("#print_"+i).width($(window).width());
$("#print_"+i).width($(window).height());
}

Now all your content can be placed on divs which occupy one page per div.

Answer 4

In terms of formatting something for printing, this is more of a CSS issue than JS. Consider using the page-break options in CSS such as page-break-before or page-break-after : http://css-tricks.com/almanac/properties/p/page-break/