How can I include a header that appears when a page breaks during printing with JavaScript?

I am facing an issue with printing data from a grid in JavaScript. The grid contains over 100 records, but when I try to print it using JavaScript, the page header is missing on every page and the final record data is not showing up. Can anyone help me improve this?

 self.print();

I use this command to initiate printing:

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

The above code is used to print only the Grid on the print screen.

I want to fix this by ensuring that there are only 15 records per page and headers present on 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";
            }
        }
    }

Although I also tried using the above code, I did not get the desired result.

Answer №1

Based on certain assumptions, a potential implementation could be as follows:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Hovering over a link in the navigation bar causes additional spacing

HTML: <ul> <li><a href="#">Home</a></li> <li><a href="#">Products</a> <ul><a href="#">Power tools</a></ul> <ul><a href="#">Decorating</a>< ...

The slideout tab must remain fixed to the left side of the div on smaller screens, regardless of any other factors

I am currently creating a SlideOut filter div. By default, this Div is positioned on the right side of larger screens. However, when the screen size decreases, the Sidebar disappears and the .SlideOutTab becomes visible. Between 768px and 992px, both the ...

Cookie fails to transmit upon deploying my application on Vercel

After developing a straightforward authentication system using cookies and expressjs, everything was running smoothly on my local environment. However, upon deployment to Vercel, I encountered issues where the program code was not executing properly (cooki ...

Using the margin property creates an odd spacing issue that seems out of place

Here is the HTML and CSS code that I am using: div { background: yellow; width: 77px; height: 77px; border: 1px dotted red } #one { margin: 0px 21px 41px 41px } <html> <head> <meta charset="UTF-8"> ...

Regulations for the Web Address of the Interactive Feature in AJAX

Recently, I decided to experiment with AJAX while trying to incorporate form validation from a database before allowing users to submit content. However, I encountered an issue with the URL segment of the Open function. It seems that when I use the full ...

Mixing colors in THREE.js vertex shader based on height levels

How can I change the color of the mesh to blue only when the height is zero? Currently, I am using a mixture of colors: https://i.sstatic.net/x3s4d.png The issue with this blending method is that it lacks precision. I want the color blue to appear only ...

modifying the width of the primary container following the display or concealment of an alternate container

I am working on a main div that contains two separate divs for main content and sidebar content. The sidebar content can be hidden or shown by clicking a link. When the sidebar is hidden, I want the content div to occupy the entire space within the conta ...

Sending data from a partial view to a controller

Imagine I have two models: DailyTasks and Task. The initial view is strongly typed with the DailyTasks model, displaying a list of existing tasks for the day. Users can add more tasks to the list/table by clicking the add button. Upon clicking the add butt ...

The height of the href is not displaying correctly when the text-decoration is disabled and it is placed next to

In my design, I have a link positioned next to an image with perfect vertical alignment. Everything looks great when the text has the standard text-decoration, centered vertically and all that. However, as soon as I remove the text-decoration, leaving the ...

The left margin of the Bootstrap 12 column grid is not aligned correctly

Currently, I am utilizing Bootstrap in conjunction with Vue within an App.vue file. One issue I have encountered is the excessive empty space on both the left and right sides when using Bootstrap. An image has been provided below for reference. I followed ...

Undo changes in Sequelize transaction using a specific rollback target

In my current project, I am utilizing managed transactions. There is a specific scenario where I need to implement a single transaction and revert to a certain savepoint if it encounters an error, but still ensure that the changes are committed in the end. ...

Unable to view JSON data outcome in JSP page

Within my .JSP file, I have the following HTML and JavaScript code: <form id="form"> <input type="text" name="name" id="name"><br><br> <input type="text" name="address" id="address"><br><br> <input ...

AngularJS component data binding is dysfunctional

I am currently experimenting with component binding in AngularJS for the first time. Unfortunately, I am facing some challenges as I am unable to get it to work correctly and pinpoint where the issue lies. In this scenario, I have two components: one is r ...

What steps should be taken in order to ensure the effectiveness of this keyword search

Currently, I am attempting to implement a keyword search feature for my meteor web app. Although the functionality is there, it's running quite slow. The way it works now is that when a user creates an article, they assign keywords to it. The keyS fun ...

Storing the model on the server with the help of Backbone and NodeJS

As a beginner in Backbone and AJAX, as well as being new to Node.js which my server is built on, I am working on saving a model using the Save method in Backbone for a webchat project for university. Right now, my goal is to send the username and password ...

What is the process for modifying a field type in Netsuite?

I'm exploring ways to build an online form within Netsuite. Our predefined fields include firstname, lastname, etc. Within these, we also have a NLSUBSCRIPTIONS tag, but it's currently set up as a drop-down with multiple select options. I ...

Vibrant diversity in a solitary symbol

I have customized styles to incorporate Fontawesome icons with their brand colors - for instance, the Opera icon appears in red, IE in blue, and Firefox in orange. Chrome, however, presents a unique challenge with its four distinctive colors. I am curious ...

AngularJS Formly's ui-mask feature: Stripping input mask characters from the model

I recently implemented an input mask on a 10-digit phone number field within my Formly form using AngularJS. The input is masked with dashes (xxx-xxx-xxxx) and displays correctly on the page. However, the issue arises when attempting to ignore these mask c ...

Attempting to understand how to retrieve specific items from my MongoDB Database that are associated with a particular user based on their ID

I've been attempting to retrieve specific items (Portfolio pics) that have been submitted by a user from my Mongo Database. However, when I checked the extracted items using Console logs, it seems to display all portfolio pieces for every user instead ...

Arrays in Javascript (correlating)

I'm having trouble figuring out what needs to be included in this code (I apologize that it's in German, it's an array corresponding to images for JavaScript.) function namenZuBildern(){ var bilder = new Array( "000227", "000228", " ...