Question

我有一个在独立的html文件中工作正常的故事。我想要一个左侧链接的滚动列表，它将加载表格，其中包含与所选链接相关的数据（我希望它能像W3Schools网站一样工作）。为此，我创建了一个包含两个Iframe的页面：一个用于列表，另一个用于我的数据表。问题是当我将数据加载到Iframe时数据表停止工作。我错过了什么？

以下是我的代码：

主页（索引）：

<html>
<head>
   <link rel="stylesheet" type="text/css" href = "css/Custom.css" />
   <title>Failed Fax Monitor></title>
</head>
<body>
    <iframe id="weeks" src="WeekList.html"></iframe>
    <iframe id="requests" src = "Requests.html" name="Requests" ></iframe>
</body>
</html>

列出框架（周）

<html>
<head>


     <meta http-equiv="Content-Type" content="text/html; charset=ISO-859-1">
    <meta http-equiv="X-UA-Compatible" content="IE=11">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
     <link rel="stylesheet" type="text/css" href="jQuery/datatables.min.css"></link>
     <link rel="stylesheet" type="text/css" href = "css/Custom.css" />
     <script src="jQuery/datatables.min.js"></script>

     <script>
        $(document).ready(function() {
        }
    </script>
</head>
<body>
    <!--- hard-coded for now will eventually be populated dynamically -->
    <ul>
        <a href="php/Data.php?Date=20170123">01/23/2017</a>
        <a href="php/Data.php?Date=20170116">01/16/2017</a>
        <a href="php/Data.php?Date=20170109">01/09/2017</a>
        <a href="php/Data.php?Date=20160102">01/02/2017</a>
        <a href="php/Data.php?Date=20161226">12/26/2016</a>
        <a href="php/Data.php?Date=20161219">12/19/2016</a>
        <a href="php/Data.php?Date=20161212">12/12/2016</a>
        <a href="php/Data.php?Date=20161205">12/05/2016</a>
        <a href="php/Data.php?Date=20161128">11/28/2016</a>
        <a href="php/Data.php?Date=20161121">11/21/2016</a>
        <a href="php/Data.php?Date=20161114">11/14/2016</a>
        <a href="php/Data.php?Date=20161107">11/07/2016</a>

    </ul>
</body>
</html>

具有数据表（请求）的框架

<html>
    <head>
         <link rel="stylesheet" type="text/css" href = "css/Custom.css" />
         <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
        <meta http-equiv="X-UA-Compatible" content="IE=11">
            <scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
         <link rel="stylesheet" type="text/css" href="jQuery/datatables.min.css"></link>

        <script src="jQuery/datatables.min.js"></script>

         <script>
            $(document).ready(function() {

                 $('#faxList').dataTable( {
                     "pageLength" : 50,
                     fixedHeader: true,
                     paging: false,
                     //"dom": '<"top"iflp<"clear">>rt<"bottom"iflp<"clear">>',
                    "ajax": { 
                        "url": "php/data.php",
                        "dataType": "json",
                        "cache": false,
                        "contentType": "application/json; charset=utf-8",
                        "dataSrc": "transactions"
                    },
                    columns: [
                        { data: 'PROCESS_DATE' },
                        { data: 'PROCESS_STATUS' },
                        { data: 'PDF_FILE_NAME' },
                        { data: 'REF_ID' },
                        { data: 'ADDITIONAL_INFO' }

                    ]
                });

            });
        </script>



    </head>

    <body>


        <h2>NCompass Failed Fax Monitor</h2>
        <br>
        <table width="100%" class="display" cellspacing="0" id="faxList">
            <thead>
                <tr>
                    <th>Process Date</th>
                    <th>Status</th>
                    <th>PDF File</th>
                    <th>Reference ID</th>
                    <th>Error Description</th>
                </tr>
            </thead>

        </table>
        </body>
     </html>

Answer 1

它对我有用。你认为这可能是错字：

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

请求框架中的

...应该是......

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Answer 2

我明白了。我在错误的页面上有javascript。将其移动到主页面（而不是iframe）解决了这个问题。

我有一个数据表工作独立但不在IFrame中

2 个答案: