【问题标题】:Splitting large html file in several files将大型html文件拆分为多个文件
【发布时间】:2017-04-01 05:06:27
【问题描述】:

我想先说我是 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,并以与将其内容直接粘贴到“Table data here”出现在我的原始代码中。

我尝试使用 jQuery .load() 函数,但无法让它工作。我使用 CSS 格式有问题吗?

让我知道您认为解决我问题的最佳方法。

谢谢!

【问题讨论】:

  • 使用.load(),然后在.load()方法的完整回调中调用.dataTable()函数应该没问题。当你“无法让它工作”时发生了什么?数据是否已加载但未格式化,或者根本没有加载,或者您是否在浏览器的控制台中收到错误,或者...?

标签: jquery html excel import datatables


【解决方案1】:

您可以使用&lt;link&gt; 元素并将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>

【讨论】:

    【解决方案2】:

    我想知道是否有办法将表数据保存在单独的文件中,例如 b.html,并以与将其内容直接粘贴到“Table data here”出现在我的原始代码中。

    你绝对有正确的想法。您可以对 HTML(或任何类型的数据)发出 HTTP 请求。有多种方法可以做到这一点,但一种简单的方法是像现在一样使用 jQuery 的 $(...).load('/...') 函数。

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

    其中result 是您要使用test.html 值填充的div 的ID

    这将请求test.html,并将文档放入ID为result的div中。

    在后台,$(...).load() 异步发送请求并在请求完成时更新元素。除了 URL,您还应该在加载调用完成后提供回调以运行代码。因此,我们可以在 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>

    让我知道您认为解决我问题的最佳方法。

    如果您有一个巨大的电子表格,您可以将其保存为 CSV 并使用a CSV parser 将表格中的每一行转换为 html 中的一行。这涉及:

    1. 使用 jquery(或fetch)将数据作为 CSV 的 ajax 请求
    2. 解析成数组
    3. 将其转换为 HTML 行并将它们添加到文档中
    4. 最后打电话给DataTables()

    但是如果你的数据库比较大,那么你应该尝试动态分页,这在没有服务器代码(nodejs、php、java 等)的情况下很难。

    【讨论】:

    • 非常感谢。感谢您的帮助,我终于让它工作了。我认为我遇到的部分问题是我根本无法让.load() 工作,最终是因为我使用的是 chrome。不知何故,我只得到一个空白页,好像没有导入任何内容。它在 Firefox 上运行良好。有人知道这是怎么回事吗?
    • 在chrome中打开开发者控制台(F12)如果有错误请告诉我
    • 这是 chrome 的错误信息。 XMLHttpRequest cannot load file:///[...]/test.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. 不过不知道是什么意思。
    • @ZetaOrionis 我认为您收到此错误是因为您直接打开文件。如果您使用 Web 服务器打开它,它应该可以工作。如果您安装了 npm,您可以 npm install -g http-server 然后从项目文件夹的根目录运行 http-server。然后你应该可以去http://localhost:8080/查看你的页面
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2022-01-16
    • 2019-10-21
    • 1970-01-01
    • 2017-01-27
    • 1970-01-01
    • 2019-06-14
    • 2014-06-06
    相关资源
    最近更新 更多