在每页上打印标题 Print.CSS

Question

我有一个包含对象列表的视图。

例如，如果我有一个人员列表.. 按他们所在的位置和他们所在的部门排序：

|  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

所以我的操作返回语句如下所示：

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

return View(lstOfPersonnel);

在我看来，我有这个：

<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>

现在，当我打印预览时，它会将同一建筑物和分区中的每个人放在各自的标题下。但是，第一个 <thead> 元素.. 可以说这个例子是 Building1 和 Finance，因为 .OrderBy.. 显示在 每个 页面的顶部下一座建筑。

所以对于视觉效果，这就是我打印预览时的样子：

第 1 页：

// Perfect Render
Building1 | Finance

Name    |    Age
Alex          30
John          35
John          25

第 2 页：

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

Name    |    Age

Building1 | Human Resources

Name    |    Age
Ian          27
Justin       41

第 3 页：

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

Name    |    Age

Building2 | Accounting

Name    |    Age
Mary         43

第 4 页：

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

Name    |    Age

Building2 | ISS

Name    |    Age
Chris         43

Answer 1

尝试在 for 循环中创建表格，以便循环在每个循环上创建一个新表格，而不仅仅是头部和主体。所以我认为这正在发生：

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

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

而不是这个

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

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

所以发生的情况是您只有 1 个表格，并且它在每页顶部打印该表格内的每个头，因为该表格正在转到下一页。对于多个表格，它只包含头部，因此每次表格浮动到下一页时，头部都会打印在新页面的顶部。

然后您可以在每个 tbody 之前执行您的 if，因为看起来每个表中的头部都保持相同。

不妨试试这个：

        @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>

        }