在多个文件中分割大型HTML文件
我想说，我是在html编码非常新手的前言。
我目前在Excel中build立一个相对较大的数据库（2000条目），我想在我的网站上提供该数据库。 我开始做的是将excel数据转换为html数据，然后使用DataTables jQuery插件将其转换为一个很好的可search的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 .load()函数，但无法得到它的工作。 我使用CSS格式有问题吗？
让我知道你认为是我的问题的最佳解决scheme。
谢谢！
我想知道是否有一种方法可以将表格数据保存在一个单独的文件中，比如说b.html，并以这样的方式导入它，就像直接粘贴它的内容一样：“表格数据这里“出现在我的原始代码。
你绝对有正确的想法。 您可以为HTML（或任何types的数据）发出HTTP请求。 有多种方法可以做到这一点，但一个简单的方法是使用jQuery的$(...).load('/...')函数。
$( "#result" ).load( "test.html" );
其中的result是你想用test.html的值填充div的id
这将做出test.html的请求，并把文档放在一个带有id result的div中。
在底层， $(...).load()asynchronous发送一个请求，并在请求完成时更新元素。 除了URL之外，您还应该在加载调用完成后提供callback来运行代码。 因此，我们可以在html加载后调用DataTable() 。
// 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>
你可以使用rel属性设置的<link>元素来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>