Fatal编程技术网
  • jquery/
  • Jquery 现有html表的分页，在MVC4 razor视图的IFrame中显示 首先，我使用的是使用Raxor VIEW引擎的MVC 4 Web应用程序，文件路径来自Windows通信基础应用程序。

Jquery 现有html表的分页，在MVC4 razor视图的IFrame中显示 首先，我使用的是使用Raxor VIEW引擎的MVC 4 Web应用程序，文件路径来自Windows通信基础应用程序。

jquery html asp.net-mvc iframe razor

Jquery 现有html表的分页，在MVC4 razor视图的IFrame中显示 首先，我使用的是使用Raxor VIEW引擎的MVC 4 Web应用程序，文件路径来自Windows通信基础应用程序。,jquery,html,asp.net-mvc,iframe,razor,Jquery,Html,Asp.net Mvc,Iframe,Razor,我试图在带有分页的IFrame中显示一个HTML文件。该表由数据库生成，并以代码形式从XML文档输入XSL样式表。文件路径以字符串的形式返回，并完美地加载到IFrame中。我可以查看表格并根据需要滚动 问题在于，我需要将已经存在的HTML表拆分为不同的页面，因为该表可能太大，有数千行数据 下面是一个示例，输入html的缩写版本。此文件将作为字符串输入 字符串文件路径=@“C:\documents\visualstudio2010\projects\myproject\Temp\Paginatio

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

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

下面是一个示例，输入html的缩写版本。此文件将作为字符串输入

字符串文件路径=@“C:\documents\visualstudio2010\projects\myproject\Temp\Pagination.html”


名字
年龄
约翰·史密斯
30
史密斯任務
29
以下是我对生成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="..\..\Temp\Pagination.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>


@{
ViewBag.Title=“HtmlDisplay”；
}
另存为示例
var now=false；
函数saveIt（）{
如果（现在）{document.execCommand（“SaveAs”）；}
}
从父级打印Iframe
身体
{
字体系列：Arial；
字体大小：12px；
}
var header_-friendly='这是该页面的打印机友好版本。单击“打印”将其打印。单击“关闭”关闭此窗口而不打印。“
功能打印机（左、上、宽、高）{
frames['ifr\u-friendly'].document.body.innerHTML=header\u-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=宽度；
document.getElementById（'ifr_friendly'）。style.height=高度；
}};
我曾尝试使用JQuery对表进行分页，但没有按计划进行。如果我最终使用某种类型的JQuery，那么在IE8中必须使用1.8或更低的版本。你可能会问，我为什么不制作不同的表格，然后点击生成下一个html页面呢。这是可能的，但我不能这样做，因为我的要求

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

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

MSDN文章：

代码看起来像

@{
     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: ">>")
}

@{
var grid=新的WebGrid（模型）
}
@如果（grid.TotalRowCount>0）
@GetHtml（表样式：“WebGridTableStyle”，alternatingRowStyle：“WebGridAlternatingRowStyle”，行样式：“WebGridRowStyle”，标题样式：“GridHeader”，列：grid.columns(
grid.Column（“名称”，格式：@@item.Name），
grid.Column（“年龄”，格式：@@item.Age）））
@网格寻呼机(
模式：WebGridPagerModes.All，
数字链接：5，
第一个文本：“”）
}
我最终使用JavaScript隐藏了这些表。在样式表中，我为创建的每个表创建了不同的表ID（这些表是使用递归创建的）。在样式表创建的head标记中，我添加了一个javascript函数来隐藏表。它使用document.getElementById（id）.style.display='none'；。当然，这不是真正的分页，但它确实呈现了我想要的效果，而无需创建多个html文件。HREF也是使用递归创建的，因此页面的数量与表的数量相匹配。“上一个”和“下一个”按钮通过“for”循环检查表的显示，如果表显示等于“block”，则将该表渲染为“none”，并将该表的上一个或下一个渲染为block。显然，索引检查可以确保它没有超过生成的表的数量。

不幸的是，数据不能以DataTables/Dataset的形式直接发送到UI。这种分离允许在服务器上通过简单的拖放和更新的服务引用来更改样式表。您有两个简单的选项，javascript datatable库和ASP.NET MVC关于分页的文章： 
@{
     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: ">>")
}