现有 html 表的分页，显示在 MVC 4 剃须刀视图上的 IFrame 中

首先，我使用使用剃刀视图引擎的MVC 4 Web应用程序，文件路径来自Windows Communication Foundation应用程序。

我正在尝试在带有分页的 IFrame 中显示一个 HTML 文件。该表从数据库生成，并以代码形式从 XML 文档馈送到 XSL 样式表中。文件路径以字符串形式返回，并完美地加载到 IFrame 中。我可以根据需要查看表格和滚动。

问题出在我需要将已经存在的HTML表拆分为不同的页面的地方，因为该表可能太大，数千行数据。

下面是输入 html 的示例缩短版本。此文件将以字符串形式出现。

字符串文件路径 = @"C：\documents\visualstudio2010\projects\myproject\Temp\Pagination.html";

<!DOCTYPE html />
<script src="../../Scripts/jquery.Pagination.js" type="text/javascript"></script>
<title></title>
<html>
<head>
</head>
<body>
    <table border="1">
        <thead>
            <th>
                Names
            </th>
            <th>
                Age
            </th>
        </thead>
        <tbody>
            <tr>
                <td>
                    John Smith
                </td>
                <td>
                    30
                </td>
            </tr>
            <tr>
                <td>
                    Jane Smith
                </td>
                <td>
                    29
                </td>
            </tr>
        </tbody>
    </table>
  <body>
</html>

这是我对制作IFrame的看法。

<script src="../../Scripts/jquery.Pagination.js" type="text/javascript"></script>
<script src="../../Scripts/sorttable.js" type="text/javascript"></script>
<script src="../../Scripts/dragtable.js" type="text/javascript"></script>
<script src="../../Content/themes/base/jquery.ui.pagination.css" rel="stylesheet"
     type="text/css" />
@{
     ViewBag.Title = "HtmlDisplay";
}
<html>
<head>
    <title>Save as example</title>
    <script language="JavaScript" type="text/JavaScript">
        var now = false;
        function saveIt() {
            if (now) { document.execCommand("SaveAs"); }
        }
    </script>
</head>
<body onload="now=true">
    <a href="javascript:;" onclick="saveIt();">
        <img style="height: 40px; width: 40px; display: inline;"             src="../../Content/images/go_down_blue.png"
        alt="" />
</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <title>Print Iframe From Parent</title>
    <style>
        body
        {
            font-family: Arial;
            font-size: 12px;
        }
    </style>
</head>
<body>
</body>
</html>
<script language="javascript" type="text/javascript">
    var header_friendly = '<div style="position: relative; text-align: center; border-bottom: 2px     solid black; font-family: verdana; font-size: 11px; padding: 5px; padding-top: 1px; color: darkred">This is a printer friendly version of the page. Click <button style="cursor: pointer" onclick="window.print(); parent.document.getElementById('ifr_friendly').style.left='-10000px'">PRINT</button> to print it. Click <button style="cursor: pointer" onclick="parent.document.getElementById('ifr_friendly').style.left='-10000px'">CLOSE</button>  to close this window without printing.</div>'
    function printer_friendly(which, left, top, width, height) {
        frames['ifr_friendly'].document.body.innerHTML = header_friendly +     frames[which].document.body.innerHTML;
        document.getElementById('ifr_friendly').style.left = left;
        document.getElementById('ifr_friendly').style.top = top;
        document.getElementById('ifr_friendly').style.width = width;
        document.getElementById('ifr_friendly').style.height = height;
    }};
</script>
<div>
    <!-- Order: name of the printer-friendly-iframe, left, top, width, height  -->
    <a href="javascript: void(0)" onclick="printer_friendly('ifr', '5%', '5%', '90%', '90%')">
        <img src="../../Content/images/print-256.png" alt="" style="height: 40px; width: auto;" />        </a>
    <iframe class="sorttable dragtable" id="ifr" name="ifr" style="position: absolute; left: 15%;     top: 45%; width: 70%;
        height: 60%;" src="....TempPagination.html"></iframe>
    <!-- The printer friendly window -->
    <iframe id="ifr_friendly" name="ifr_friendly" style="position: relative; z-index: 10000;
        background: white; left: -10000px; border: 1px solid black"></iframe>
</div>

我试图使用 JQuery 对表格进行分页，但它没有按计划进行。如果我最终使用某种类型的 JQuery，它必须是 1.8 或更低才能在 IE8 中使用。您可能会问我为什么不制作不同的表格，然后单击以生成下一个 html 页面。这是可能的，但由于我的要求，我不能这样做。

欢迎任何意见。提前谢谢。

您是否尝试过使用 MVC WebGrid？它们内置了分页功能，并将为您生成实际的 HTML。我假设您可以选择直接从数据库中获取数据，而不是获取预渲染的 HTML。

MSDN 文章： http://msdn.microsoft.com/en-us/magazine/hh288075.aspx

代码看起来像...

@{
     var grid = new WebGrid(model)
}
@if (grid.TotalRowCount > 0)
@grid.GetHtml(tableStyle: "WebGridTableStyle", alternatingRowStyle: "WebGridAlternatingRowStyle", rowStyle: "WebGridRowStyle", headerStyle: "GridHeader", columns: grid.Columns(
    grid.Column("Name", format: @<text>@item.Name</text>),
    grid.Column("Age", format: @<text>@item.Age</text>)))
@grid.Pager(
    mode: WebGridPagerModes.All,
    numericLinksCount: 5,
    firstText: "<<",
    previoustext: "<",
    nextText: ">",
    lastText: ">>")
}

我最终使用JavaScript来隐藏表格。在样式表中，我为每个创建的表创建了不同的表 ID(这些表是使用递归创建的(。在样式表创建的 head 标签中，我添加了一个 javascript 函数来隐藏表。它使用了document.getElementById(id(.style.display = 'none';。当然，这不是真正的分页，但它确实渲染了我想要的效果，而无需创建多个 html 文件。href 也是使用递归创建的，因此页数与表数匹配。上一个和下一个按钮通过一个 for 循环，该循环检查表的显示，如果表显示等于"块"，它将该表呈现为"无"，并将该表的前一个或旁边的一个呈现为块。显然，使用索引检查以确保它不会超过生成的表数。

相关内容

最新更新

热门标签：