RF: improve table content loading and processing

Table content loading and processing is now done
asynchronously. Table data is dynamically added
after processing.

assets/js/main.js

@@ -455,36 +455,6 @@ function directory(jQuery) {
     return;
   }
 
-  let poster_json = null;
-
-  $.ajax({
-    async: false,
-    type: 'GET',
-    url: md5Url,
-    success: function(poster) {
-      $.ajax({
-        async: false,
-        type: 'GET',
-        url: md5OverrideUrl,
-        success: function(overrides) {
-          poster["posters"].map(
-            function (e, i) {
-              Object.assign(e, overrides["posters"][i]);
-            });
-          poster_json = poster;
-        }
-      });
-    }
-  });
-
-  if (poster_json == null) {
-    errorMsg(
-        jQuery,
-        "Could not load metadata and/or metadata overrides"
-    );
-    return;
-  }
-
   // Embed the table placeholder
   jQuery('#content').prepend('<table id="directory" class="display"></table>');
 
@@ -497,14 +467,9 @@ function directory(jQuery) {
         '<P> More and info and feel welcome to send PRs for <a href="https://github.com/datalad-datasets/ohbm2020-posters" target="_github">https://github.com/datalad-datasets/ohbm2020-posters</a> since I know no JS</p>'
         );
 
-  var table = jQuery('#directory').dataTable({
+  var table = jQuery('#directory').DataTable({
     async: true,    // async get json
     paging: false,  // ensure scrolling instead of pages
-    data: poster_json["posters"],
-    //ajax: {         // specify url to get json from ajax
-    //  url: md5Url,
-    //  dataSrc: "posters"
-    //},
     //order: [[6, "desc"], [0, 'asc']],
     columns: [      // select columns and their names from json
       {data: "number", title: "#", width: "5%"},
@@ -581,6 +546,27 @@ function directory(jQuery) {
 //                                          '</span>');
 //   }
   });
+
+  $.ajax({
+    async: false,
+    type: 'GET',
+    url: md5Url,
+    success: function(poster) {
+      $.ajax({
+        async: false,
+        type: 'GET',
+        url: md5OverrideUrl,
+        success: function(overrides) {
+          poster["posters"].map(
+              function (e, i) {
+                Object.assign(e, overrides["posters"][i]);
+              });
+          table.rows.add(poster["posters"]).draw();
+        }
+      });
+    }
+  });
+
   localStorage['ntCache'] = JSON.stringify(ntCache);
   return table;
 }