sorttable.js 在服務器上工作，但在內聯時不工作

Question

我正在創建一個生成報告的工具，我想對它們進行“html 化”報告包含許多表格，這個 JAVA SCRIPT 包會很棒

https://kryogenix.org/code/browser/sorttable/

它有效 - 當且僅當 - 我從網絡服務器中提取所有文件。 即：我的代碼包含：

如果我內聯模塊並從服務器加載它，它就不起作用。

要求：我需要這些是獨立文件，我的“用戶/受害者”需要單擊文件名並查看報告文件，而不是啟動本地服務器等。

一個背景——例子：在嵌入式軟件工程中你經常在編譯你的文件時有一個鏈接映射文件，我想制作一個更好的HTML版本（除了純文本）。 用戶需要點擊和查看這些類型的文件。 長期是一些交互式圖形和圖表，但是（嬰兒步驟）最初可以排序的表格會很棒。

問題 1我嘗試了什么

如果我像這樣內聯文件“sorttable.js”：

   <script>  ... body of sortable.js here ... </script>

我在我的瀏覽器（以及我嘗試過的其他人）中看到垃圾，我看到我必須把它放在 HEAD 中，其他地方說：身體，我所做的一切似乎都不起作用。

問題 2我嘗試過的其他方法

如果我嘗試從 HTML 文件“旁邊”的文件中加載圖像，HTML 文件可能會以相同的方式加載“.png”或“.jpg” - 這些工作 - 但腳本沒有，意思是：

   <script src="sorttable.js"></script>

所有瀏覽器都會產生相同的垃圾。

Answer 1

根據庫頁面，表必須具有sortable類，以便庫找到這些表並應用排序功能。 您必須注入以下代碼：

1. 注入可排序腳本
2. 等待可排序腳本加載完畢
3. 將sortable類添加到所有表
4. 重置sortable.init.done標志並重新初始化腳本

(function() {
  // Add sorttable.js to the page
  var po = document.createElement('script');
  po.type = 'text/javascript';
  po.async = true;
  po.src = 'https://kryogenix.org/code/browser/sorttable/sorttable.js';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(po, s);

  // set a timer to check and see when sorttable.js is loaded
  let timer = setInterval(() => {
    if (window.sorttable) {
      // Clear the timer
      clearInterval(timer);

      // Get all tables in the page
      let tables = document.querySelectorAll('table');

      // Add sortable class to each table
      tables.forEach((table) => table.classList.add('sortable'));

      // Reset sorttable done flag
      window.sorttable.init.done = false;

      // Re-run sorttable init code
      window.sorttable.init();
    }
  }, 200);
})();

您可以檢查此代碼是否有效：

1. 打開一個包含一些表格的頁面，例如HTML 表格
2. 打開控制台（ Widnows 上的 F12 ）
3. 粘貼上面的代碼並按回車

您應該會看到該表現在是可排序的。