Better dataTables_processing

mobidic · Jun 12, 2023 · e7f7fe0 · e7f7fe0
1 parent d8f185f
commit e7f7fe0
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 8 deletions.
diff --git a/seal/static/seal/analysis/sample.css b/seal/static/seal/analysis/sample.css
@@ -13,5 +13,16 @@
     height: 29px;
 }
 .toolbar-variants {
-    padding:9px
-}
+    padding:9px;
+}
+div.dataTables_processing {
+    margin-top:13px !important;
+    z-index:3 !important;
+    /* padding:19px !important; */
+    visibility: visible !important;
+}
+div.dataTables_processing span{
+    padding:1px 20px;
+    background-color: rgb(255,255,255,0.5);
+    border-radius: 10px;
+}
diff --git a/seal/static/seal/analysis/sample.js b/seal/static/seal/analysis/sample.js
@@ -342,7 +342,7 @@ $(document).ready(function() {
         processing: true,
         language: {
             loadingRecords: '<div class="animation-bar-1"><span style="width:100%"></span></div>',
-            processing: '<span style="width:50%"><i class="fas fa-cog fa-spin"></i> Processing...</span>',
+            processing: '<span><i class="fas fa-cog fa-spin"></i> Processing...</span>',
             searchBuilder: {
                 button: {
                     0: 'Create filter',
@@ -1147,8 +1147,8 @@ $(document).ready(function() {
                 attr: { id: 'reload-button' },
                 action: function ( e, dt, node, config ) {
                     $('#variants').DataTable()
-                    .clear()
-                    .draw();
+                        .clear()
+                        .draw();
                     $('td.dataTables_empty', $('#variants')).html('<div class="animation-bar-1"><span style="width:100%"></span></div>');
                     $('#variants').DataTable().ajax.reload();
                     $('#reload-button').html("<span>Reload table</span>");
@@ -2173,9 +2173,11 @@ function saveFilter() {
     })
 }
 function applied_panel(id, sample_id) {
-    $("#variants_processing").css("visibility","show");
-    $("#variants_processing").attr('style', 'display: block; z-index: 10000 !important');
-    $("#variants").css('opacity', '0.6');
+    $('#variants').DataTable()
+        .clear()
+        .draw();
+    $('td.dataTables_empty', $('#variants')).html('<div class="animation-bar-1"><span style="width:100%"></span></div>');
+
     $.ajaxSetup({
         beforeSend: function(xhr, settings) {
             if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type) && !this.crossDomain) {