html - 在每页上打印标题 Print.CSS

Question

我有一个接受对象列表的 View 。

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

|  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 循环中创建表格，以便循环在每个循环中创建一个新表格，而不仅仅是头部和 body 。所以我认为这正在发生:

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

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

而不是这个

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

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

所以发生的事情是你只有一个表，它在每一页的顶部打印该表内的每个头，因为该表将转到下一页。对于多个表格，它只包含在 head 上，因此每次表格 float 到下一页时，head 都会打印在新页面的顶部。

然后您可以在每个 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>

        }