How to print html table with default header in each page

Question

I am creating a print option on a html table. this table has hundreds of rows. Data are fetching from php and AJAX. After getting this data i am creating a print option like below.

 function PrintElem(elem){
    Popup($(elem).html());
    }//
    function Popup(data) 
    {
        var mywindow = window.open('', 'my div', 'width=100%');
        mywindow.document.write('<html><head><title></title>');
        mywindow.document.write('<link rel="stylesheet" href="<?php echo base_url(); ?>/resources/css/bootstrap.css" />');
        mywindow.document.write('</head><body >');
        mywindow.document.write(data);
        mywindow.document.write('</body></html>');

        mywindow.document.close(); mywindow.focus(); //newwindow.focus();
        mywindow.print(); mywindow.close();
        return true;
    }//
<span class="trial_balance_ajax" id="print_section"> 
<!---- Ajax table data loads here----->
</span>

Now I am trying to print table header column in each page of printed document. But In this case Data header only shows in first page then data overflows in others page...

I want a Default Column header in Each page

please help

You really should not use `document.write` – meskobalazs Feb 09 '15 at 13:25 — meskobalazs, Feb 09 '15 at 13:25

score 0 · Answer 1 · edited May 23 '17 at 12:15

~~What does your generated table look like? My testing indicates that if you create a table with explicit <thead> and <tbody> the header is automatically set for you:~~

<table>
    <thead>
        <tr>
            <th>Foo</th>
            <th>Bar</th>
            <th>Baz</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>!!!</td>
            <td>!!!</td>
            <td>!!!</td>
        </tr>
        <!-- Many rows... -->
        <tr>
            <td>!!!</td>
            <td>!!!</td>
            <td>!!!</td>
        </tr>
    </tbody>
</table>

In other words, the above seems to work as requested.

Edit: The requested behaviour seems to occur automatically in Firefox, but is sadly not possible to achieve without compromises in other browsers. See this related question for suggestions.

Yes my table is as like above but default header in every page does not appear — Brett, Feb 09 '15 at 13:06
Sorry. It seems that firefox does this automatically. I wil try and find a cross-browser solution. — rusmus, Feb 09 '15 at 13:07

score -1 · Answer 2 · answered Feb 09 '15 at 12:57

-1

Why dont you divide rows so you can create another table having header in it.

answered Feb 09 '15 at 12:57

Shoeb Ansari

17
2

No I want to show this report in a page then there is a print option.. so i cant do this in my view page. – Brett Feb 09 '15 at 12:59

How to print html table with default header in each page

2 Answers2