Answers

• colin Posts: 15,240Questions: 1Answers: 2,599

  January 2022

  We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

  Cheers,

  Colin
• j.castelli Posts: 10Questions: 4Answers: 0

  January 2022

  Thanks for your feedback Colin! My apologies, I should have indeed specified it in my original post:
  * I can't share a link since this is a local environment
  * I haven't been able to replicate the issue unfortunately.

  The best I can do is share my code:

  document.addEventListener("DOMContentLoaded", function(event) {
      if(document.querySelectorAll("#datatableStorefront").length) {
          (async () => {
              let columnsData = await fetch(routes.getColumns).then(response => response.json()).catch(console.log);
              initDatatable(columnsData);
          })();
      }
  });
  
  function initDatatable(columnsData) {
      let table = $('#datatableStorefront').DataTable({
          ajax: routes.getRows,
          deferRender: true,
          columns: columnsData['columns'],
          fixedHeader: true,
          fixedColumns: { left: 3 },
          "autoWidth": false,
          "order": [[ 0, "desc" ], [ 1, "asc" ], [ 2, "asc" ]],
          "columnDefs": [
              {
                  "targets": columnsData['hidden_columns'],
                  "visible": false
              },
              {
                  searchPanes: {show: false},
                  targets: columnsData['hidden_panes']
              },
              {
                  "targets": columnsData['coloured'],
                  "createdCell": function (td, cellData, rowData, row, col) {
                      if (cellData == 'OK' )
                          $(td).css('background-color', 'rgba(39, 204, 22, 0.5)')
                      else
                          $(td).css('background-color', 'rgba(255, 0, 0, 0.5)')
                  }
              }
          ],
          dom: 'BPQlfrtip',
          "pageLength": 10,
          buttons: [
              {
                  extend: 'colvis',
                  collectionLayout: 'fixed two-column'
              },
              {
                  extend: 'collection',
                  text: 'Export',
                  buttons: ['excel', 'csv']
              },
              {
                  text: 'Refresh cache',
                  action: function (e, dt, node, config) {
                      this.disable();
                      $(".dt-buttons").append("<p id='processing' style='color: #e06100'>Refreshing cache...</p>");
                      (async () => {
                          await fetch(routes.refreshStorefrontsCache).catch(console.log);
                          table.ajax.reload();
                          $("#processing").css("color", "rgb(39, 204, 22)");
                          $("#processing").html("The cache has been refreshed!");
                          setTimeout(function() {
                              $("#processing").fadeOut().remove();
                          }, 3000);
                          this.enable()
                      })();
                  }
              }
          ]
      });
  }
  
• colin Posts: 15,240Questions: 1Answers: 2,599

  January 2022

  If you're not able to replicate it, it's likely to be a local styling issue which we would need to see to be able to progress this,

  Colin
• fabz Posts: 1Questions: 0Answers: 0

  February 2023

  Hello,
  I had exactly the same problem.
  It was because of the CSS property "transition" inherited from my ResetCSS style sheet :
  * {
  transition: 0.4s;
  }
  Removing it solved the problem.
  Hope it can help.