2017-04-01 122 views
1

我想通過說我是html編碼的新手來說明以下內容。將幾個文件中的大型HTML文件拆分

我目前在excel中建立了一個相對較大的數據庫(2000條目),我想在我的網站上提供該數據庫。我開始做的是將excel數據轉換爲html數據,然後使用DataTables jQuery插件將其轉換爲一個很好的可搜索html表格。這裏是我的代碼如下所示:

<html> 
<head> 

<link rel="stylesheet" type="text/css" href="DataTables-1.10.13/datatables.min.css"/> 
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-2.2.4/dt-1.10.13/fh-3.1.2/datatables.min.js"></script> 

<style> 
    some style options 
</style> 

<script type="text/javascript" charset="utf-8"> 
    $(document).ready(function() { 
    $('#booklist').dataTable({ 
    }); 
    }); 
</script> 
</head> 

<body> 
<table id="booklist" class="display"> 
Table data here 
</table> 
</body> 
</html> 

我仍然定期更新的數據庫,並具有在文檔中複製和粘貼的新表中的數據每次都是煩人的,特別是因爲它代表圍繞10000線。

我想知道是否有辦法將表格數據保存在一個單獨的文件中,比如說b.html,並以這種方式導入它,就像將它直接粘貼到「表格數據在這裏「出現在我的原始代碼中。

我試過使用jQuery​​函數,但無法讓它工作。我使用CSS格式有問題嗎?

讓我知道你認爲是我的問題的最佳解決方案。

謝謝!

+0

使用'.load()',然後調用'.dataTable()'從'.load內功能()'方法的完整的回調應該沒問題。當你「無法工作」時發生了什麼?數據是否加載,但沒有格式化,或根本沒有加載,或者您在瀏覽器的控制檯中是否出現錯誤,或者...? – nnnnnn

回答

0

我想知道的數據得到如果有辦法保留表格數據一個單獨的文件,比如b.html,並以這種方式導入它,就像直接在我的原始代碼中出現「Table data here」時粘貼它的內容一樣。

你一定有正確的想法。您可以爲HTML(或任何類型的數據)發出HTTP請求。有很多方法可以做到這一點,但一個簡單的方法就是像現在這樣使用jQuery的$(...).load('/...')函數。

$("#result").load("test.html"); 

其中result是你想要的test.html

這個值來填充將使請求test.html並把文件在一個div id爲result的div ID。

在引擎蓋下,$(...).load()異步發送請求,並在請求完成時更新元素。除了URL之外,您還應該在加載調用完成後提供回調以運行代碼。因此,我們可以在之後調用DataTable()的html加載。

// this URL would be an http://... in actual use 
 
// table taken from w3schools 
 
let url = "data:text/html,%3Ctable%20id%3D%22my-table%22%3E%0A%20%20%3Ctr%3E%0A%20%20%20%20%3Cth%3ECompany%3C%2Fth%3E%0A%20%20%20%20%3Cth%3EContact%3C%2Fth%3E%0A%20%20%20%20%3Cth%3ECountry%3C%2Fth%3E%0A%20%20%3C%2Ftr%3E%0A%20%20%3Ctr%3E%0A%20%20%20%20%3Ctd%3EAlfreds%20Futterkiste%3C%2Ftd%3E%0A%20%20%20%20%3Ctd%3EMaria%20Anders%3C%2Ftd%3E%0A%20%20%20%20%3Ctd%3EGermany%3C%2Ftd%3E%0A%20%20%3C%2Ftr%3E%0A%20%20%3Ctr%3E%0A%20%20%20%20%3Ctd%3ECentro%20comercial%20Moctezuma%3C%2Ftd%3E%0A%20%20%20%20%3Ctd%3EFrancisco%20Chang%3C%2Ftd%3E%0A%20%20%20%20%3Ctd%3EMexico%3C%2Ftd%3E%0A%20%20%3C%2Ftr%3E%0A%20%20%3Ctr%3E%0A%20%20%20%20%3Ctd%3EErnst%20Handel%3C%2Ftd%3E%0A%20%20%20%20%3Ctd%3ERoland%20Mendel%3C%2Ftd%3E%0A%20%20%20%20%3Ctd%3EAustria%3C%2Ftd%3E%0A%20%20%3C%2Ftr%3E%0A%20%20%3Ctr%3E%0A%20%20%20%20%3Ctd%3EIsland%20Trading%3C%2Ftd%3E%0A%20%20%20%20%3Ctd%3EHelen%20Bennett%3C%2Ftd%3E%0A%20%20%20%20%3Ctd%3EUK%3C%2Ftd%3E%0A%20%20%3C%2Ftr%3E%0A%20%20%3Ctr%3E%0A%20%20%20%20%3Ctd%3ELaughing%20Bacchus%20Winecellars%3C%2Ftd%3E%0A%20%20%20%20%3Ctd%3EYoshi%20Tannamuri%3C%2Ftd%3E%0A%20%20%20%20%3Ctd%3ECanada%3C%2Ftd%3E%0A%20%20%3C%2Ftr%3E%0A%20%20%3Ctr%3E%0A%20%20%20%20%3Ctd%3EMagazzini%20Alimentari%20Riuniti%3C%2Ftd%3E%0A%20%20%20%20%3Ctd%3EGiovanni%20Rovelli%3C%2Ftd%3E%0A%20%20%20%20%3Ctd%3EItaly%3C%2Ftd%3E%0A%20%20%3C%2Ftr%3E%0A%3C%2Ftable%3E"; 
 

 
// need to give `load` a callback so we can run code *after* the HTML loads 
 
$('#result').load(url, function() { 
 
    $('#my-table').DataTable(); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet"/> 
 
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script> 
 

 
<div> 
 
    <div>result get populated below:</div> 
 
    <div id="result"> 
 
    </div> 
 
</div>


讓我知道你想什麼是我的問題的最佳解決方案。

如果你有一個巨大的電子表格,你很可能將它保存爲一個CSV和使用a CSV parser在表改造的每一行的行中的HTML。這涉及到:

  1. 與jquery(或fetch),用於將數據作爲CSV
  2. 解析它成陣列
  3. 轉化,爲HTML的行和將其添加到文件
  4. 然後最後一個AJAX請求打電話DataTables()

但是,如果你的數據庫是比較大的,那麼你應該嘗試去動態分頁,這是很難沒有服務器代碼(nodejs,php,java等)。

+0

非常感謝。終於感謝你的幫助,我得到了它的工作。我認爲我遇到的問題的一部分是我無法使用'.load()'來工作,並且最終因爲我使用了chrome。不知何故,我只得到一個空白頁,就好像沒有任何東西被導入。它在Firefox上運行得很好。任何人都知道這是怎麼回事? – ZetaOrionis

+0

在Chrome中打開開發人員控制檯(F12),並讓我知道是否有任何錯誤 –

+0

以下是Chrome的錯誤消息。 XMLHttpRequest無法加載file:/// [...] /test.html。只有協議方案支持交叉源請求:http,data,chrome,chrome-extension,https.'不確定它是什麼意思。 – ZetaOrionis

1

您可以使用<link>元素與rel屬性設置爲import,使用link元素的.import屬性,它返回一個document

<link rel="import" type="text/html" href="b.html" /> 

<head> 
 
<link id="data" 
 
     rel="import" 
 
     type="text/html" 
 
     href='data:text/html,{"abc":123, "def":[4,5,6]}' /> 
 
</head> 
 
<body> 
 
    <script> 
 
    const data = document.getElementById("data"); 
 
    let entries = JSON.parse(data.import.body.textContent); 
 

 
    console.log(entries); 
 
    /* 
 
    $(document).ready(function() { 
 
     $('#booklist').dataTable({ 
 
     // populate `.dataTable()` with selected `entries` 
 
     }) 
 
    }); 
 
    */ 
 

 
    </script> 
 
</body>