Creating Page Breaks on the Fly with jQuery and CSS

In my HTML page, there's a form embedded in a large table that allows users to manipulate rows by deleting, moving, and adding them dynamically.

For printing purposes, I want to ensure that no more than 25 rows appear on each page to maintain legibility and prevent layout issues caused by shrinking font sizes. To achieve this, I'm exploring the idea of inserting a page break after every set of 25 rows.

I've considered using the CSS property page-break-after along with dynamically inserted divs (such as 

<div class="page-break"></div>
), but I'm unsure of the best approach.

To determine the current number of rows in the table using jQuery, I can use the following snippet:

$(this).closest('table').find('tbody > tr').length

Additionally, rather than creating separate pages, I simply wish to repeat the table's header at the beginning of each printed page, with a maximum of 25 rows per page.

If anyone has a related example or resource to share, or if you believe this goal is unattainable, I would greatly appreciate your assistance.

Thank you in advance, Mike

javascriptjquerycsspage-break

Answer №1

Have you considered utilizing the THEAD and TFOOT tag? These tags are specifically designed for that purpose :)

Find out more here:

In HTML, table rows can be grouped into a head, foot, and body sections using the THEAD, TFOOT, and TBODY elements, respectively. These row groups provide additional structural information and can be presented by user agents to highlight this structure. User agents may use the head/body/foot distinction to allow for scrolling of body sections independently from the head and foot sections. For long tables being printed, the head and foot data could be repeated on each page containing table data.

Answer №2

While certain browsers may have default support for the thead tag, ensuring consistency across all browsers requires explicit styling:

thead {
    display: table-header-group;
}

Note that you must have a corresponding thead element in your code for this styling to take effect.

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

AngularJS experiencing issues with deleting function implementation

Here is my JavaScript code: camListApp.controller("Hello", function($scope, $http, $uibModal){ $scope.del=function(data){ var result=confirm('are you sure?'); if(result==true){ var index=getSelectedIndex(data); ...

javascriptangularjsspringmongodb

Tips for applying unique scss classes to a div based on a specific condition

Currently, I am developing a chat application where I want to showcase messages from one specific user on the right side of the screen while displaying messages from other users on the left side. <ion-item *ngFor="let message of messages | slice:0: ...

cssangularionic-frameworksassflexbox

Encountering issues with jQuery AJAX POST request

I'm currently facing an issue while attempting to send a post request to parse JSON formatted data into my webpage. Here's an example of the query: $("#click").click(function () { $.ajax({ type: "POST", url: "http://ut-pc-236 ...

javascriptjqueryajax

AngularJS: encountering an issue with undefined vm variable while implementing controllerAs syntax within a directive

I am having trouble accessing the vm.screensize property in the relevant controller. The error message states that vm is not defined. Below you can find the directive and controller code snippets. angular.module('app.ain.directives') .direct ...

javascriptangularjsangularjs-directive

What are the drawbacks of utilizing CSS word-wrap across all elements on a website?

Is there a downside to utilizing the CSS property word-wrap:break-word in this manner? body { word-wrap: break-word; } The definitions for the values of this property are as follows: normal: Breaks words only at allowed breakpoints break-word: Perm ...

css

Having trouble fetching an identifier that was previously passed in jQuery

I'm currently working with the following code: $("#myForm").submit(function(event) { event.preventDefault(); $.when(getDatas(this.id)).done(function(r_getDatas){ var json = $.parseJSON(r_getDatas); alert(this.id); }); ...

jqueryajax

Unable to locate the requested document using the provided query string parameter

Searching for a specific document in my database using a query string referencing a user_id from a profile schema: ProfileSchema = Schema( user_id: type: Schema.Types.ObjectId vehicules: [VehiculeSchema] home: {type:Schema.Types.ObjectId, ref: &apos ...

javascriptnode.jsmongodbexpressmongoose

Having issues with npm python-shell integration within electron framework

I'm currently attempting to establish a connection between a python script and an Electron app by utilizing the npm's python-shell package. The requirement is for the script to be executed whenever a button is clicked. So, let's assume my d ...

javascriptpythonnpmelectrondesktop-application

As the browser window is resized, the gap between images widens while the images themselves decrease

Hey there, I'm encountering some trouble with the image links at the top of my page. As I resize the browser or change screen resolutions in media queries using percentages, the images are resizing accordingly. However, I'm noticing that as the i ...

htmlcssimagescalespace

changing the value of a global variable from inside a function

Currently, I am working with Vue in an attempt to assign values to checkboxes. Below is the code snippet: let variable = false; export default { name: "nyle-home", created() { this.notifstate = this.$route.params.data[0].state; ...

javascriptvue.jsvariablesparametersglobal-variables

AngularJS can easily interpret and extract information from HTML code

As an example, I have dynamically generated HTML on my webpage like this: <ul> <li>Country</li> <li>State</li> <li>City</li> </ul> I am looking to send this information to the database after clicking a b ...

javascriptangularjs

Adjustments in Spacing for Text with Significant Digits

It has come to my attention that in the United States, large numbers are often formatted with a comma between thousands, like so: $1,000,000.00. Here in South Africa, using a comma as a thousands separator is not standard practice, as it is more commonly u ...

cssnumber-formattingkerningletter-spacing

Develop a unique method for loading AngularJS templates

When working with AngularJS, there are various ways to provide an external template, such as using a script tag or a separate HTML file on the web server. However, I am faced with a situation where I need to implement a custom logic for retrieving these ...

javascriptangularjstemplatesangular-templatecache

The CSS properties intended for ion-button elements are not taking effect

I'm attempting to set a background color when a ion-button is clicked or maintain the ion-ripple effect after it has filled the button in Ionic 4. I experimented with applying custom CSS states in global.scss, but encountered issues where the active ...

cssangularionic-frameworkionic4

Struggling to deploy my Laravel application with Tailwind CSS on the frontend. However, running "npm run dev" results in an error

While running the npm command `npm run dev` in cmd, I encountered an error stating that I require PostCSS v8 even though I already have PostCSS v8.3 installed. Could it be possible that Tailwind CSS specifically needs version 8 despite newer versions being ...

phpcsslaraveltailwind-csspostcss

NodeJS: Issue when implementing try/catch with async/await causing SyntaxError

As a newcomer to Node Js, I am struggling to understand why the code below is throwing a syntax error with catch(). I recently updated to Node JS V14. Any assistance would be greatly appreciated. async function demoPromise() { try { let message ...

javascriptnode.js

Trouble transmitting -> securing -> receiving using jQuery and PHP

In my php file, I am receiving 4 parameters via $_GET and I need to generate an encrypted string using those values. Below is the code I am currently using: $key="asdfasdfasdfasdfasdfasdf"; $result = ''; for($i=0; $i<strlen($cadena); $i++) { ...

javascriptphpjqueryencryption

Using the $group operator with a nested array component

Can you show me how to utilize MongoDB's aggregation feature to summarize the count of each reason_id? I have noticed that there are 2 counts for "reason_id = KW7Kcsv7835YZeE3n" and 1 count for "reason_id = KNcKQCjhFzha3oLfE". Below is the dataset: ...

javascriptmongodbaggregation-framework

Rest parameter ...args is not supported by Heroku platform

When interacting with Heroku, an error message SyntaxError: Unexpected token ... appears. What modifications should be made to this function for compatibility with Heroku? authenticate(...args) { var authRequest = {}; authRequest[ ...

javascriptnode.jsheroku

transmitting JSON information and retrieving it again

I am currently navigating the process of passing objects through AJAX, and I find myself struggling with debugging as I am uncertain about both the passing and retrieving aspects. Essentially, my dilemma lies in making an AJAX request to a PHP controller ...

javascriptphpjqueryajaxjson