Answers

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

  June 2022

  There is this thread that might help. Doesn't look like a complete solution was posted but maybe it will give you some ideas.

  Kevin
• desperado Posts: 159Questions: 33Answers: 4

  June 2022 edited June 2022

  @kthorngren Thanks that's a nice pluggin and good to see another user needs the same thing but so far I am unable to find a place to start and stop the processing pluggin. The display wan't really the issue it's finding hooks to do it.

  I thought I could use the stateRestore-change event but that is not triggered on selection of a state.
• desperado Posts: 159Questions: 33Answers: 4

  June 2022 edited June 2022

  @sandy Is the StateRestore menu supposed to drop "before" the state loads? I have a problem because it doesn't lower until after and the load is taking over 6 seconds for a large data set with seachBuilder (8000 rows).

  Looking at the code I think you do try to lower the menu but it doesn't seem to work. Clicking on the background doesn't seem to close the stateRestore state selection window.

          StateRestore.prototype.load = function () {
              var _this = this;
              var loadedState = this.s.savedState;
              var settings = this.s.dt.settings()[0];
  
              // Always want the states stored here to be loaded in - regardless of when they were created
              loadedState.time = +new Date();
              settings.oLoadedState = $$1.extend(true, {}, loadedState);
              // Click on a background if there is one to shut the collection
              $$1('div.dt-button-background').click();
  

  If the menu is expected to close when the load is done then can you provide a hook to start a processing display before the load starts and another when the load is done ?

  I tried hacking your js code and adding my show and hide of my processing image.

  $.fn.dataTable.ext.buttons.stateRestore = {
              action: function (e, dt, node, config) {
                  // HACK TO SEE IF I CAN DISPLAY A LOADING SPINNER
                  // WHY DOES THIS ONLY WORK IF I BREAK IN DEBUGGER AND STEP?
                  // IF I don't break or I just resume after the console.log then
                  // my processing spinner doesn't work.   But if I do break and 
                  // step and then continue it shows my processing spinner for the 
                  // 6 seconds load takes.
                  console.log("stateRestore Load Started");
                  // Must step over this line for it to work, otherwise nothing happens
                  $('#loading').show();
                  // HACK END PART 1
  
                  config._stateRestore.load();
  
                  // HACK TO SEE IF I CAN DISPLAY A LOADING SPINNER
                  console.log("stateRestore Load Started");
                  $('#loading').hide();
                  // HACK END PART 2
  
                  node.blur();
              },
  
• desperado Posts: 159Questions: 33Answers: 4

  June 2022

  @Sandy I was able to get my processing spinner working by adding two events in your code. stateRestore-load-start and stateRestore-load-end.

  For this to work I needed to issue the start and then set a timeout to start the load processing so the spinner could display before the load started, without the timeout the show on the spinner doesn't happen.

  This is where I placed the trigger of the events.

              action: function (e, dt, node, config) {
                  // Send load start event to allow for a "processing" display 
                  $$1(dt.table().node()).trigger('stateRestore-load-start');
                  // Wrap the load in a timeout to allow the "processing" display to happen
                  setTimeout(function() {
                      config._stateRestore.load();
                      node.blur();
                      // Send load end event to allow for the removal of "processing" display
                      $$1(dt.table().node()).trigger('stateRestore-load-end');
                  },50);
              },
              config: {
                  split: ['updateState', 'renameState', 'removeState']
              },
  

  Would you be able to add this to the base code. There are others with this same issue so I think it would be helpful.

  If you are willing to add this then I think you would need to add the events here as well. Although I guess the user of the api could just implement the processing start, timeout call to load and processing end. Your call....

  apiRegister('stateRestore.state().load()', function () {
              var ctx = this[0];
              ctx.load();
              return this;
          });