Generating a header each time a table is printed across multiple pages

A table has been created in a webform using C#. The goal is to only print the table when the user clicks the print button on the webform.

Javascript has been implemented in ASP.NET to only print the content within a specific div. While this method works, due to the large number of rows in the table, multiple pages are generated.

There is a need for the table header to be displayed again on each new page. How can this be achieved?

The code snippets include:

<asp:Button ID="printBtn" runat="server" Text="Print" onClientClick="printdiv('tableDiv')" />
        <div id="tableDiv">
        <asp:Table ID="resultsTable" runat="server" GridLines="Both">
        </asp:Table>
        </div>

JavaScript for printing:

<script type="text/javascript">
    function printdiv(printpage) {
        var headstr = "Header";
        var footstr = "Footer";
        var newstr = document.all.item(printpage).innerHTML;
        var oldstr = document.body.innerHTML;
        document.body.innerHTML = headstr + newstr + footstr;
        window.print();
        document.body.innerHTML = oldstr;
        return false;
    }
    </script>

Code behind for the table method:

protected void resultTable()
{
    // Database setup codes
    ...............

    try
    {
        // Database query codes
        ............

        if (reader.HasRows)
        {
            // Set a table width
            resultsTable.Width = Unit.Percentage(60.00);
            // Create a new row for adding a table heading
            TableRow tableHeading = new TableRow();

            // Create and add cells that contain the Name column heading text
            TableHeaderCell nameHeading = new TableHeaderCell();
            nameHeading.Text = "Name";
            nameHeading.HorizontalAlign = HorizontalAlign.Left;
            tableHeading.Cells.Add(nameHeading);

            TableHeaderCell ageHeading = new TableHeaderCell();
            ageHeading.Text = "Age";
            ageHeading.HorizontalAlign = HorizontalAlign.Left;
            tableHeading.Cells.Add(ageHeading);

            resultsTable.Rows.Add(tableHeading);


            while (reader.Read())
            {

                TableRow detailsRow = new TableRow();

                TableCell nameCell = new TableCell();
                nameCell.Text = reader["name"].ToString();
                detailsRow.Cells.Add(nameCell);

                TableCell ageCell = new TableCell();
                ageCell.Text = reader["age"].ToString();
                detailsRow.Cells.Add(ageCell);

                resultsTable.Rows.Add(detailsRow);

            }
        }
        reader.Close();
    }
    catch (Exception ex)
    {
        System.Diagnostics.Debug.WriteLine(ex.ToString());
    }
    conn.Close();
}

Answer №1

After developing a CSS Stylesheet, I utilized the following technique:

thead { display: table-header-group; }

It has come to my attention that this approach is only functional in IE and Firefox browsers.

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

Upon installing a global npm package, the system encountered an error stating: 'File or directory not found: ENOENT'

After successfully publishing my first Node.js CLI tool package on npm, I encountered an issue when trying to test it by installing it locally. The warning message "Error: ENOENT: no such file or directory" kept showing up. Steps for Reproduction To start ...

What is the best way to iterate through a JSON object using the stages array provided?

I am facing an issue with parsing the provided json to display the desired output on the screen. These are the steps I need to follow for parsing this json: 1. Extract the stages array from the json - for example, stages ["check_dependency_progress", "sh ...

Using body-parser in an Express router: a step-by-step guide

I'm having trouble with a post API that returns an undefined object when trying to print it in the console. I initially thought I was missing body-parser, but even after adding it, I encountered an error message indicating body-parser deprecated bodyP ...

Error encountered: Denied access in AWS Transcription Node JS API

I have been working with the AWS transcription API in Node JS and my code looks like this: const tClient = new TranscribeClient({ region: "us-east-1", credentials: { accessKeyId: AWS_ID, secretAccessKey: SECRET, ...

Tips for updating nested data in mongoose with 2 unique identifiers?

Is there anyone out there with experience in making a Node push function work on nested objects beyond just one level? I'm looking to delve deeper into a second id within the DB model. // Functional code for updating a user at one level with one id ...

Create a fresh trail underneath the overlay image

When utilizing fabric.js to draw a new path with isDrawingMode: true enabled (seen on the right side of the screenshot), I am encountering an issue where the path appears above my overlay image, which is a transparent png. https://i.stack.imgur.com/R3fGn. ...

Emulating Data in Angular 2 Using Configuration Similar to Ember Mirage

Is there a way to mock data through configuration in Angular 2 similar to how it's done in Ember Mirage? I'm aware that I can create my own solution using Dependency Injection and MockBackend to intercept HTTP calls and provide dummy data. Howeve ...

Verify that the zip code provided in the input matches a record in the JSON data and extract the

I need to create a feature where users can input their zip code, check if it matches any of the zones in a JSON element, and then display the corresponding zone: var zones = [{ "zone": "one", "zipcodes": ["69122", "69125", "69128", "69129"] }, ...

It vanishes as soon as you move your cursor away during the animation

I created a button component with text animation, but I'm encountering an issue. When I hover over the button, the animation works smoothly. However, if I quickly move my cursor away or unhover in the middle of the animation, the text disappears unex ...

Unexpected error: JSON data at line 1 column 1 of the JSON data is incomplete

I've encountered an issue with my script related to a JSON response error. Below is the code snippet in question: $(document).ready(function() { $('#btndouble').click(function(){ var address = $('#btcaddress').val(); ...

What is the best way to make an element disappear 5 seconds after the mouse has stopped hovering

#section1 { display: block; } #section2 { display: none; } #container:hover > #section2 { display: block; } <div id="container"> <div id="section1">Section1</div> <div id="section2">Section2</div> </div> ...

Issue with Next-Auth getServerSession failing to fetch user data in Nextjs 13.4 API Route

Having an issue with accessing user session data in a Next-Auth/Nextjs 13.4 API Route. I've set up the JWT and Session callback, but the user data defined in the callback function isn't translating correctly to what getServerSession is fetching i ...

Utilizing ReactJs to Generate a Random Number for Visualization in a Material UI Progress Bar

I am looking to generate a random number for my test functionality in order to display it within a Material UI Progress bar. I have successfully implemented this piece of JavaScript code on JSFiddle, but now I want to integrate it into my React application ...

I am experiencing some challenges with my code as the Jquery Ajax function does not seem to be functioning correctly. Can

I am trying to incorporate a for loop (or `do/while loop) in my code, but unfortunately, it is not functioning as expected. The current setup is only working for a single item, and the goal is to have multiple items on a single invoice by utilizing the lo ...

What is the best method for styling arrays displayed by React in version 15 using CSS?

React v15 has made a change where elements of arrays in JSX are now rendered as <!--react-text:some_id-->text<!--/react-text--> instead of spans. I've searched for a solution but haven't been able to figure out how to apply CSS styles ...

How can you use jQuery to target a textbox based on its value that includes quotation marks?

Dealing with a JavaScript string that includes a quote mark can cause some difficulties. For example, strings like Don't click this checkbox or He said "hi" pose unique challenges when trying to find an exact match in a checkbox value. Consider the H ...

jQuery Soundboard - Pressing a single button will automatically deactivate all other buttons

I am currently developing a unique jQuery/PHP soundboard feature where I am faced with the challenge of stopping the HTML5 Audio playback when clicking on just one button, while attached to several other buttons. Here is what I have managed to code so far: ...

How can I redirect to a different page with a keypress event in Next.js?

I am looking to implement a redirection function in nextjs when users press a key. There is a search input field where users can type and then hit the enter key to navigate to another page. Here's what I have attempted: const handleKeyPress = (e) = ...

Grunt integration for version control

After sticking to simple Html and Css for the longest time, I'm finally diving into JavaScript for a new project where I want to automate versioning. I've been following the SemVer Guidelines and my projects are currently versioned as "version": ...

Capturing mouse coordinates from hover events in Highcharts Gantt using the highcharts-react library

Currently, I am utilizing the official React highcharts wrapper to create a Gantt chart. My goal is to obtain precise mouse coordinates from a mouse-over event and utilize them for a custom tooltip. For instance: https://stackblitz.com/edit/react-c5mivs ...