Adding a loading indicator when copying large amounts of data?

Fantastical

Does anyone know a way to add a loading indicator for the time between when you click the copy button (included in the copy extension) and when it actually copies the data to the user's clipboard? I ask because we are displaying a lot of data and then copying it... it can take around 10 seconds. I would like the user to know that there is an action actively being handled. I tried doing a .live('click', function) jquery call for a class I added with buttons.className but it seems like DataTables gets in there first. It doesn't display until after the copying has already happened.

bindrid

I have not tried this but it might work.

when the customized callback is set it, it has all of the data so what if you try assigning a busy indicator via an on click event, then use the customize callback to turn it off?

Fantastical

I may have misunderstood, but I tried to do an on click event for the button but that's when it returns after the data has already been copied.

bindrid

Yes, I don't think that one through. You don't have control over which one fires first.

bindrid

So I came up with this simple but clumsy solution.

<style>
/*  This hides the copy button from view*/
    button.dt-button.HideCopyButton, 
    div.dt-button .HideCopyButton, 
    a.dt-button.HideCopyButton{display:none;}
</style>

<script>


   // left everthing else off but here is the button section
buttons: [{text: 'Copy', extend: 'copy', className: "HideCopyButton"},
            {
                // Fake copy button
                text: "Copy", action: function (e, dt, node, config) {
                    // cusomize message warning user.  When copying is done, it will get over ridden so don't worry about closing it.
                dt.buttons.info(dt.i18n('buttons.copyTitle', 'Copying to clipboard'), '<p>This may take a few seconds</p>', 0);
                // Nnow trigger a click on the real copy button
                $(".HideCopyButton").trigger("click"); 
            }
        }
    ]
</script>

allan

The latest release of Buttons should actually have this ability built in.

Its possible that the browser isn't updating the UI while its still computing the copy though since its the same "thread".

Can you link to a test page showing the issue please.

Allan