How to add a response to download buttons?

ischrisfitz

When you have larger tables and click the Excel download button (excelHtml5), there can be a delay from when the button is clicked to when the "Save Location?" window opens. In that time I'd like to add a spinner to the page to let the user know something is happening. I've seen this question pop up in several places, but none with a working answer. I'm thinking Allen may have addressed this in Buttons 1.3.0 as indicated by the release notes. I'm having trouble actually getting it to work though. Has anyone had any luck doing this kind of thing?

colin

Hi @ischrisfitz ,

I think you just need to use processing. This thread here also has a few examples,

Cheers,

Colin

ischrisfitz

Thanks for the response Colin. I'm not quite there yet though. A few things are happening here. I have a table with about 20,000 rows, so I'm using server side processing. All good there. I also need to be able to do an Excel download. Things start to get a little less clear. What I have done is add "All" to the "Show entries" drop-down. The user gets processing message while all of the rows load in the table. After that, they can click the button to download the Excel file. Not the best case, but it does seem to work.

I have seen recommendations for making a button that grabs the data needed for the Excel file outside of what is in the table and returns that when the button is clicked. Seems good, but I'm not sure how that would work and haven't been able to find much in the forums on it. I'd be interested if anyone can point me in the right direction here.

On top of that, when you click the Excel download button there can be a delay. In the first scenario I mentioned (load 20,000 rows in table and click the button), there is about a five second window between when you click the button and when you are asked where to save it. I'd like to be able let the user know something is happening here in that five second window.

One thing I did notice was that when you click the Excel download button, the button stays in a "down" state until the Excel file is ready and then the button goes to an "up" state. I can get what I want by watching the state changes -

"buttons": [{
                extend: "excelHtml5",
                title: '',
                text: "Excel Download <span class=\"loading_spinner_ex initial_hide\"><i class=\"fa fa-spinner fa-spin\"></i></span>",
                className: "btn btn-md btn-success btn-track",
                filename: 'Reports ' + vmin + ' to ' + vmax
            }],

Then after the table is created -

$( ".btn-track" )
            .mouseup(function() {
                $(".loading_spinner_ex").hide();
            })
            .mousedown(function() {
                $(".loading_spinner_ex").show();
            });

This makes for a nice little spinner in the button when you click on it that goes away after the Excel file downloads. The downside is that it only seems to work in Chrome, so I'm looking for something more robust.

allan

What version of Buttons are you using? The latest version should show a little "processing" indicator while the file is being made up and downloaded.

Its worth remembering as well though that Javascript is single threaded and the process of creating the file will peg the cpu, so there might not be the chance for the browser to update the display. it sounds like Chrome might be more aggressive than others in updating the page.

Allan

ischrisfitz

I started out with DataTables version 1.10.18 with Buttons version 1.5.4. I ended up falling back to DataTables version 1.10.16 with Buttons version 1.5.1. There was a performance difference between the two -

Testing with a 18,431 row, four column table -
DT 1.1.18, Buttons 1.5.4:
9.8 Seconds - Time to load all rows on the screen
15.2 Seconds - Time from when Excel download button is clicked, to a resulting file
7.3MB - Size of Excel file

DT 1.1.16, Buttons 1.5.1:
9.8 Seconds - Time to load all rows on the screen
3.8 Seconds - Time from when Excel download button is clicked, to a resulting file
5.8MB - Size of Excel file

The difference in Excel file generation time is what made me revert back to 1.5.1. Note - Looks like the difference in size of the Excel came from an additional xml: space="preserve" in the sheet.xml file.

Since you mentioned it, I went back to 1.10.18/1.5.4 today. I'm not seeing the processing indicator though. Is there something I'm doing to make it not show? Here is my code:

var table = $('#thetable').DataTable( {
            processing: true,
            serverSide: true,
            dom : '"<\'row\'<\'col-sm-4\'l><\'col-sm-8\'f>>"rtipB',
            ajax: {
                url: "a-get-projects-simple",
                data: function (d) {
                    d.min = fmin;
                    d.max = fmax;
                }
            },
            columns: [
                { title: "Title", data:[2] },
                { title: "Customer", data:[3] },
                { title: "Date Completed", data:[14] },
                { title: "Work Sites", data:[6] }
            ],
            "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
            "buttons": [{
                extend: "excelHtml5",
                title: '',
                text: "Excel Download",
                className: "btn btn-md btn-success btn-track",
                filename: 'Projects ' + vmin + ' to ' + vmax
            }],
            "deferRender": true,
            language: {
                "processing": "Loading..."
            }
        } );

        table.buttons().container().insertAfter( '#x_dl' );

        var dtable = $("#thetable").dataTable().api();

        // To only search after three characters
        $(".dataTables_filter input")
            .unbind()
            .bind("input", function(e) {

                if(this.value.length >= 3 || e.keyCode == 13) {
                    dtable.search(this.value).draw();
                }
                if(this.value == "") {
                    dtable.search("").draw();
                }
                return;
            });

colin

Hi @ischrisfitz ,

Yep, the performance issue is a known problem, see here, and will be addressed soon.

Cheers,

Colin