Is it possible to display a working progress bar or spinner when a State is Selected ?

desperado

I have a table which has 8000 rows. I am using search builder and state restore.

When select a state which limits the data to 3600 of the 8000 it takes about 6 seconds for the menu to drop after I make the selection.

Is it possible to display some working indicator once a state is selected and drop it when the menu drops ?

kthorngren

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

@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

@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

@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;
        });