Answers

• Loren Maxwell Posts: 387Questions: 94Answers: 10

  June 2023 edited June 2023

  I plucked this out of the Editor code and added it (slightly modified) to my function after the ajax reload:

  table.ajax.reload()
  
  nodes = $(table.rows().nodes());
  setTimeout(function () {
      nodes.addClass('highlight');
      setTimeout(function () {
          nodes
              .addClass('noHighlight')
              .removeClass('highlight');
          setTimeout(function () {
              nodes.removeClass('noHighlight');
          }, 550);
      }, 500);
  }, 20);
  

  Works great, although I'm open to suggestions if there's a better approach, especially one that would access the Editor private method just in case it should ever change!
• kthorngren Posts: 20,425Questions: 26Answers: 4,794

  June 2023 edited June 2023

  One option is to use the processing() plugin. That shows the same processing indicator that Datatables uses with processing like this example. You can see the last example in the docs here:
  https://live.datatables.net/ribifuda/1/edit

  However it looks like you want to flash all the rows instead. With the above code you can use the xhr event instead of a setTimeout function, for example:

  table.one('xhr', function () {
      nodes = $(table.rows().nodes());
      nodes.addClass('highlight');
      setTimeout(function () {
          nodes
              .addClass('noHighlight')
              .removeClass('highlight');
          setTimeout(function () {
              nodes.removeClass('noHighlight');
          }, 550);
      }, 500);
  });
  
  table.ajax.reload();
  

  Note the use of one() instead of on() so the event handler runs only once after the ajax.reload().

  Not sure about accessing the Editor private function.

  Kevin
• kthorngren Posts: 20,425Questions: 26Answers: 4,794

  June 2023

  Another thing you might want to do is limit the flashed rows to those on the page using selector-modifier of { page: 'current' }, for example:

  nodes = $(table.rows( { page: 'current' } ).nodes());
  

  Kevin
• Loren Maxwell Posts: 387Questions: 94Answers: 10

  June 2023

  Thanks, @kthorngren (Kevin) -- a great help as always!
• Loren Maxwell Posts: 387Questions: 94Answers: 10

  June 2023

  I had to add back in the initial outer setTimeout function since the adding and the removal of the "highlight" class was happening so fast it wasn't visible.

  table.on('xhr', function () {
      setTimeout(function () {
          nodes = $(table.rows( { page: 'current' } ).nodes());
          nodes.addClass('highlight');
          setTimeout(function () {
              nodes
                  .addClass('noHighlight')
                  .removeClass('highlight');
              setTimeout(function () {
                  nodes.removeClass('noHighlight');
              }, 550);
          }, 500);
      }, 20);
  });
  
  table.ajax.reload()
  
  
• kthorngren Posts: 20,425Questions: 26Answers: 4,794

  June 2023 Answer ✓

  Oh ok. I thought it was to delay execution to wait for the response.

  I assumed you are calling a function for this so you might want to change table.on('xhr' to table.one('xhr'. Otherwise you will be tacking on another event handler each time the function is called. If you call the function three times you will have three event handlers that will run with .on(). My assumption might be wrong though.

  Kevin
• Loren Maxwell Posts: 387Questions: 94Answers: 10

  June 2023 edited June 2023

  Ah yeah -- I changed it from table.one('xhr' to table.on('xhr' when I was troubleshooting the reason for not seeing the flash and forgot to change it back.

  Thanks for catching that!

  For anyone interested here's the final (at least so far!):

  table.one('xhr', function () {
      setTimeout(function () {
          nodes = $(table.rows( { page: 'current' } ).nodes());
          nodes.addClass('highlight');
          setTimeout(function () {
              nodes
                  .addClass('noHighlight')
                  .removeClass('highlight');
              setTimeout(function () {
                  nodes.removeClass('noHighlight');
              }, 550);
          }, 500);
      }, 20);
  });
   
  table.ajax.reload()
  
• allan Posts: 61,972Questions: 1Answers: 10,160 Site admin

  June 2023

  Works great, although I'm open to suggestions if there's a better approach, especially one that would access the Editor private method just in case it should ever change!

  Funnily enough, I just changed that code for the first time in years only two days ago. I've updated the CSS so it no longer needs the intermediate noHighlight class. It will now flash an offset "border" around the row being changed with the updated CSS (which works better with now the row selection colours work). These changes will be in Editor 2.2 which will drop before the end of the month.

  If that code is working for you, I'd just copy it out and use it in a function of your own (which it looks like you've now done).

  Allan