我有一個數據表獨立工作，但不在iframe中

我有一個在獨立html文件中工作正常的故事。我想有一個滾動的鏈接列表左側，將加載與選定的鏈接相關的數據表（我希望它的工作像W3Schools網站）。爲此，我創建了一個包含兩個Iframe的頁面：一個用於列出另一個用於我的數據表。問題是，當我將它加載到iframe時，datatable停止工作。我錯過了什麼？我有一個數據表獨立工作，但不在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>

來源

2017-01-27 Mark Ainsworth

你想說的「datatable停止工作」。你有沒有在F12工具中看到任何結果？ –

它適合我。你是否認爲這可能是錯字：

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

來源

2017-01-27 19:44:24

謝謝，但沒有。錯字是從我轉移到堆棧溢出。它不存在於我的代碼中。 –

開發人員工具告訴你什麼？ –

或者將它放在公共服務器上，以便我們可以看到它的實際應用。 –

我想通了。我有錯誤的頁面上的JavaScript。將它移到主頁面（而不是在iframe中）解決了這個問題。

來源

2017-01-27 20:16:37

我有一個數據表獨立工作，但不在iframe中

回答

相關問題