Skip to content
This repository has been archived by the owner on Jul 25, 2021. It is now read-only.

The scripts slows down the browser to a hault when a table has lots of rows #193

Open
MikeAlhayek opened this issue Jan 3, 2020 · 2 comments · May be fixed by #195
Open

The scripts slows down the browser to a hault when a table has lots of rows #193

MikeAlhayek opened this issue Jan 3, 2020 · 2 comments · May be fixed by #195

Comments

@MikeAlhayek
Copy link

Describe the bug
I have a table with lots of columns/rows. When a user submits an HTML form using "POST" request, my app query the database and renders the data into an HTML table.

Everything renders perfectly fine until I include the script that exports the table. When the export table is included it slows down rendering the page. The browse will keep giving me the following warning.

A web page is slowing down your browser. What would you like to do? [Stop it]  [Wait]

This issue sounds like #155 except #155 is just a bad ticket because this is a great plugin and I have been using it for a long time!

To Reproduce
Steps to reproduce the behavior:
Create an HTML table with lots of columns/rows. the page will come to a halt before it even finishes loading.

Expected behavior
I expect the page to load just fine with/without the table-export plugin.

The export script should not access the table in the DOM until after the page is loaded. Also, processing the table should only happen if/when the user clicks the "export" table. Not everyone using the web page will be exporting the data, so there is no need to add more load on the browser unless the user is trying to export the data.

Perhaps, you can create the export buttons after the page is loaded. But I would suggest delaying processing the table or initializing the rest of the script until the user clicks the export button. There may be a need to show a spinner during the export and prevent the export button from being clicked during the export just to avoid having to call the process more than once.

Screenshots
Screenshot_3

Desktop (please complete the following information):

Windows 7 64bit
Firefox version 71.0 (64-bit)
@MikeAlhayek
Copy link
Author

MikeAlhayek commented Jan 6, 2020 •
edited

@clarketm I think the main culprit with the script is the getExportData() function. I change my code so it manually exports the data as you can see in the below code, but the call to getExportData() takes forever to finish executing which causes the browser to slow down.

$(function (e) {
    'use strict';

    var tables = $('.exportable');

    if (!tables.length) {
        return;
    }

    $('<button class="btn btn-primary manual-export-to-xls" title="Export To Excel">Export To Excel</button>').insertBefore(tables);

    $(document).on('click', '.manual-export-to-xls', function (el) {
        var tbl = $(this).parent().parent().find('.export-table').first();
        var table = new TableExport(tbl, {
            formats: ['xls'],
            exportButtons: false,
            bootstrap: true,
            trimWhitespace: true
        });

        var data = table.getExportData(); // This call takes forever to finish which kills the browser.

        var exportData = data['export-buttons-table']['xls'];

        table.export2file(exportData.data, exportData.mimeType, exportData.filename, exportData.fileExtension);
    });
});

MikeAlhayek added a commit to MikeAlhayek/TableExport that referenced this issue Jan 8, 2020
@MikeAlhayek
Fix clarketm#193, improve performance during load and during export.
50d4184
@MikeAlhayek
Copy link
Author

Pull request #195 fixes this problem once and for all. I tested the outcome on one report I have, the time to export the data went down from 12 seconds to 1! Yes, 10-11 seconds less without browser issue while not impacting the page load.

@MikeAlhayek MikeAlhayek linked a pull request Jan 8, 2020 that will close this issue
Open
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Dramatically improves the performance of the export function MikeAlhayek/TableExport
1 participant
@MikeAlhayek