Print Headers on each page Print.CSS

Question

I have a view that takes a List of objects.

So for example, if I had a List of people.. put in order by where they were located and the division they were in like so:

|  ID  |  Name  |  Location    |  Division  |          Age   |
--------------------------------------------------------------
    1     John      Building1      Finance              25
    2     Alex      Building1      Finance              30
    3     Chris     Building2      ISS                  22
    4     Justin    Building1      Human Resources      41
    5     Mary      Building2      Accounting           43 
    6     Ian       Building1      Human Resources      27
    7     John      Building1      Finance              35

So my action return statement looks like this:

lstOfPersonnel = lstOfPersonnel.OrderBy(x => x.Location).ThenBy(x => x.Division).ThenBy(x => x.Name).ToList();

return View(lstOfPersonnel);

In my View I have this:

<table class="table table-bordered no-border">
    @foreach (var item in Model)
    {
        if ((Model.IndexOf(item) == 0) || ((Model.IndexOf(item) != 0) && (!item.Building.Equals(Model.ElementAt(Model.IndexOf(item) - 1).Building) || !item.Division.Equals(Model.ElementAt(Model.IndexOf(item) - 1).Division))))
        {
                <thead>
                    <tr>
                        <th><b>@item.Building</b></th>
                        <th><b>@item.Division</b></th>
                    </tr>


                    <tr class="no-display"></tr>
                    <tr>
                        <th>Name</th>
                    </tr>
                    <tr>
                        <th>Age</th>
                    </tr>
                </thead>


                <tbody>
                    <tr>
                        <td>
                            @Html.DisplayFor(modelItem => item.Name)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.Age)
                        </td>
                    </tr>
                </tbody>
        }
        else
        {
            <tbody>
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.Name)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Age)
                    </td>
                </tr>
            </tbody>
        }
    }
</table>

Now, when I print preview this, it puts everybody that is in the same building and division under their respective header. However, the very first <thead> element.. lets say for this example would be Building1 and Finance due to the .OrderBy.... is shown on every page over top of the next Building.

So for a visual this is what it looks like when I print preview:

Page 1:

// Perfect Render
Building1 | Finance

Name    |    Age
Alex          30
John          35
John          25

Page 2:

// Repeat of Page 1's headers
Building1 | Finance

Name    |    Age

Building1 | Human Resources

Name    |    Age
Ian          27
Justin       41

Page 3:

// Repeat of Page 1's headers
Building1 | Finance

Name    |    Age

Building2 | Accounting

Name    |    Age
Mary         43

Page 4:

// Repeat of Page 1's headers
Building1 | Finance

Name    |    Age

Building2 | ISS

Name    |    Age
Chris         43

Which browser are you using? As far as I remember, Chrome has an issue printing headers on each page. I don't know if they fixed it yet. — manneJan89, Feb 24 '17 at 13:11
I don't know if you already have, but take a look at this: [link](http://www.evagoras.com/2011/02/10/printing-table-headers-on-every-page/). As far as I understand the most important parts are adding the content you want printed on every page in a `thead` with the css you are using, and the content in the `tbody` with css `display:table-row-group;` — manneJan89, Feb 24 '17 at 13:21
@jae.phoenix I have edited my question to show a more specific example of my issue. — Grizzly, Feb 24 '17 at 15:03
What if you do your for-loop outside of your table? so that it creates a new table every loop instead of just a head and a body. What I think is happening is that there are multiple theads inside the table, that is why it is printing each head on top of every page. — manneJan89, Feb 24 '17 at 15:11
@jae.phoenix tried, and the formatting goes up in flames.. maybe if you post code, I can try it — Grizzly, Feb 24 '17 at 15:19

manneJan89 · Answer 1 · 2017-02-24T15:29:48.043

Try creating the table inside the for-loop, so that the loop creates a new table on every loop, instead of just the head and body. So I think this is happening:

<table>
    <thead>
    ...
    </thead>
    <tbody>
    ...
    </tbody>

    <thead>
    ...
    </thead>
    <tbody>
    ...
    </tbody>

instead of this

<table>
    <thead>
    ...
    </thead>
    <tbody>
    ...
    </tbody>
</table>

<table>
    <thead>
    ...
    </thead>
    <tbody>
    ...
    </tbody>
</table>

So what is happening is that you only have 1 table, and it is printing each head inside of that table at the top of each page, because the table is going over to the next page. With multiple tables, it only contains on head, so that head will print on top of a new page every time that table floats over to the next page.

You can then just do your if before every tbody because it looks like the head stays the same in every table.

Maybe try this:

        @foreach (var item in Model){

            <table class="table table-bordered no-border">

                <thead>
                    <tr>
                        <th><b>@item.Building</b></th>
                        <th><b>@item.Division</b></th>
                    </tr>


                    <tr class="no-display"></tr>
                    <tr>
                        <th>Name</th>
                    </tr>
                    <tr>
                        <th>Age</th>
                    </tr>
                </thead>

                <tbody>

                if ((Model.IndexOf(item) == 0) ||     ((Model.IndexOf(item) != 0) && (!item.Building.Equals(Model.ElementAt(Model.IndexOf(item) - 1).Building) || !item.Division.Equals(Model.ElementAt(Model.IndexOf(item) - 1).Division)))){   
                    <tr>
                        <td>
                            @Html.DisplayFor(modelItem => item.Name)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.Age)
                        </td>
                    </tr>
                }
                else{
                    <tr>
                        <td>
                            @Html.DisplayFor(modelItem => item.Name)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.Age)
                        </td>
                    </tr>
                }
                </tbody>

            </table>

        }

The code you posted.. if I put the table inside the foreach loop.. that would create a new `thead` element for each item.. even if they are in the same building and division.. I only want 1 builiding and division per group of people. — Grizzly, Feb 24 '17 at 15:35
what if you add an index to your `item` array inside the thead — manneJan89, Feb 24 '17 at 15:39
Your `Model` is an array, and for each `item` in that array, you want to print a ``. So now inside your loop, you specify which item in the array to print. I think it should look something like this (not 100% sure): //this gets you both the item (item.value) and its index (item.i) @foreach (var item in Model((value,i) => new {i, value})) {
maybe you will understand it better. Take a look at this [link](http://stackoverflow.com/questions/10326406/getting-index-value-on-razor-foreach) — manneJan89, Feb 24 '17 at 15:51

score 0 · Accepted Answer · edited May 23 '17 at 11:46

Multiple thead in a single table is probably not viable. That said you will have to create a new table per thead that you wish to create.

To accomplish this in one loop would look something like this:

var lastBuilding = null, lastDivision = null;

foreach(var item in Model) {

    if(!item.Building.Equals(lastBuilding) || !item.Division.Equals(lastDivision)) {
        if(lastBuilding != null && lastDivision != null) {
            </tbody></table>
        }
        <table>
            <thead>
                <tr>
                    <th><b>@item.Building</b></th>
                    <th><b>@item.Division</b></th>
                </tr>
                <tr class="no-display"></tr>
                <tr>
                    <th>Name</th>
                </tr>
                <tr>
                    <th>Age</th>
                </tr>
            </thead>
            <tbody>
    }
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Age)
        </td>
    </tr>
    lastBuilding = item.Building;
    lastDivision = item.Division;
}

The key to the logic here is:

1. Each item ultimately equates to a row in a table so the item outputs each iteration. The rest is just checking for whether or not a new table should be started (and the last one ended).
2. Setting lastBuilding and lastDivision to null for the first iteration avoids the first table being ended immediately.

Correct. Because of the encapsulating `if`, the ` does not execute on the first loop but rather before the next . In effect closing out the last table before opening the next. — Isaiah, Mar 04 '17 at 20:19

Print Headers on each page Print.CSS

2 Answers2