sorttable.js 在服务器上工作，但在内联时不工作

Question

I'm creating a tool that generates reports, I'd like to "html-ify" them The reports contain many tables, and this JAVA SCRIPT package would be great

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

It works - if and only if - I pull all files from a web server. ie: My code contains:

It does not work if I inline the module and load it from the server.

REQUIREMENT: I need these to be standalone files, my "user/victim" needs to click on the filename and view the report file and NOT start a local server, etc.

An background - example: In the embedded software engineering you often have a link map file when you compile your file, I want to make a better HTML version (in addition to the plain text). It is these types of files the user needs to click on, and review. Long term is some interactive graphs and charts, but (baby steps) initially tables that can be sorted would be fantastic.

PROBLEM 1 What I tried

If I inline the file "sorttable.js" like this:

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

I get garbage in my browser (and others I've tried), I have seen I must put this in the HEAD, and other places says: body, nothing I do seems to work.

PROBLEM 2 Other approach I tried

If I try to load the image from a file "next to" the HTML files, in the same way the HTML file might load a ".png" or ".jpg" - those work -but the script does not, meaning:

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

All browsers produce the same garbage.

Answer 1

According to the library page , tables must have the class sortable in order for the library to find those tables and apply the sorting functions. You have to inject code that:

1. Inject the sortable script
2. Wait until sortable script is loaded
3. Add sortable class to all tables
4. Reset sortable.init.done flag and re-init the script

(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);
})();

You can check this code is working:

1. Open a page with some tables inside, for example HTML Tables
2. Open console ( F12 on Widnows )
3. Paste the above code and hit enter

You should see the table is now sortable.