how to add header when page breaks when print using javascript?

Question

i have a Grid which contains more than 100 records at every time.When i am trying to print the data using javascript. It able to print the grid data.But my problem is to be in every page not having the page header and at the sametime the final record data is missing .i need to fix this issue anyone help me to improve

 self.print();

i am using this command for initiate print.after that

var gridid = "#grid";
    $("#pageheader").show();
    $("#pageheader").clone().addClass("clonecopy").appendTo("body");
    $(gridid).clone().addClass("clonecopy").appendTo("body");`

By this coding used for print only my Grid in print screen.

and i need to fix this by 15 records per page and headers(for every page)

 function printControl(){

        var table = document.getElementById("DataList1");
        var count = table.rows.length;
        for (var i = 0; i < count; i++) {
            if ((i % 4 == 0)&&(i!=0)) {
                table.rows[i].style.cssText = "page-break-after:always";
            }
        }
    }

and also i am using this code but i cant get the result..

Answer 1

Making a few assumptions here, but it would look similar to below:

var count = 0;
var page = $('<div></div>');
$('#grid').children().each(function(){
    if( count == 0 ){
        $("#pageheader").clone().addClass("clonecopy").appendTo(page);
    }
    $(this).clone().addClass("clonecopy").appendTo(page);
    count += 1;
    if( count == 15 ){
        page.appendTo("body");
        page = $('<div></div>');
        count = 0;
    } 
 });