Load datatable rows all at once (#1830)

This change modifies how we populate DataTables to draw the table only once vs. drawing it when we add each new row. This should result in tables loading quicker.
2020-05-04 08:33:58 +05:30 · 2020-05-04 08:33:58 +05:30 · 116c2a7e7e
parent 38a6a77c9c
commit 116c2a7e7e
7 changed files with 48 additions and 32 deletions
--- a/static/js/src/app/campaigns.js
+++ b/static/js/src/app/campaigns.js
@ -360,6 +360,7 @@ $(document).ready(function () {
                        [1, "desc"]
                    ]
                });
+                campaignRows = []
                $.each(campaigns, function (i, campaign) {
                    campaignTable = campaignTableOriginal
                    if (campaign.status === "Completed") {
@ -378,7 +379,7 @@ $(document).ready(function () {
                        var quickStats = launchDate + "<br><br>" + "Number of recipients: " + campaign.stats.total + "<br><br>" + "Emails opened: " + campaign.stats.opened + "<br><br>" + "Emails clicked: " + campaign.stats.clicked + "<br><br>" + "Submitted Credentials: " + campaign.stats.submitted_data + "<br><br>" + "Errors : " + campaign.stats.error + "Reported : " + campaign.stats.reported
                    }

-                    campaignTable.row.add([
+                    campaignRows.push([
                        escapeHtml(campaign.name),
                        moment(campaign.created_date).format('MMMM Do YYYY, h:mm:ss a'),
                        "<span class=\"label " + label + "\" data-toggle=\"tooltip\" data-placement=\"right\" data-html=\"true\" title=\"" + quickStats + "\">" + campaign.status + "</span>",
@ -391,9 +392,10 @@ $(document).ready(function () {
                    <button class='btn btn-danger' onclick='deleteCampaign(" + i + ")' data-toggle='tooltip' data-placement='left' title='Delete Campaign'>\
                    <i class='fa fa-trash-o'></i>\
                    </button></div>"
-                    ]).draw()
+                    ])
                    $('[data-toggle="tooltip"]').tooltip()
                })
+                campaignTable.rows.add(campaignRows).draw()
            } else {
                $("#emptyMessage").show()
            }
@ -417,4 +419,4 @@ $(document).ready(function () {
            return 0;
        });
    })
-})
+})
--- a/static/js/src/app/dashboard.js
+++ b/static/js/src/app/dashboard.js
@ -326,6 +326,7 @@ $(document).ready(function () {
                        [1, "desc"]
                    ]
                });
+                campaignRows = []
                $.each(campaigns, function (i, campaign) {
                    var campaign_date = moment(campaign.created_date).format('MMMM Do YYYY, h:mm:ss a')
                    var label = statuses[campaign.status].label || "label-default";
@ -338,8 +339,8 @@ $(document).ready(function () {
                        launchDate = "Launch Date: " + moment(campaign.launch_date).format('MMMM Do YYYY, h:mm:ss a')
                        var quickStats = launchDate + "<br><br>" + "Number of recipients: " + campaign.stats.total + "<br><br>" + "Emails opened: " + campaign.stats.opened + "<br><br>" + "Emails clicked: " + campaign.stats.clicked + "<br><br>" + "Submitted Credentials: " + campaign.stats.submitted_data + "<br><br>" + "Errors : " + campaign.stats.error + "<br><br>" + "Reported : " + campaign.stats.email_reported
                    }
-                    // Add it to the table
-                    campaignTable.row.add([
+                    // Add it to the list
+                    campaignRows.push([
                        escapeHtml(campaign.name),
                        campaign_date,
                        campaign.stats.sent,
@ -354,9 +355,10 @@ $(document).ready(function () {
                    <button class='btn btn-danger' onclick='deleteCampaign(" + i + ")' data-toggle='tooltip' data-placement='left' title='Delete Campaign'>\
                    <i class='fa fa-trash-o'></i>\
                    </button></div>"
-                    ]).draw()
+                    ])
                    $('[data-toggle="tooltip"]').tooltip()
                })
+                campaignTable.rows.add(campaignRows).draw()
                // Build the charts
                generateStatsPieCharts(campaigns)
                generateTimelineChart(campaigns)
@ -367,4 +369,4 @@ $(document).ready(function () {
        .error(function () {
            errorFlash("Error fetching campaigns")
        })
-})
+})
--- a/static/js/src/app/groups.js
+++ b/static/js/src/app/groups.js
@ -69,17 +69,17 @@ function edit(id) {
        api.groupId.get(id)
            .success(function (group) {
                $("#name").val(group.name)
+                targetRows = []
                $.each(group.targets, function (i, record) {
-                    targets.DataTable()
-                        .row.add([
-                            escapeHtml(record.first_name),
-                            escapeHtml(record.last_name),
-                            escapeHtml(record.email),
-                            escapeHtml(record.position),
-                            '<span style="cursor:pointer;"><i class="fa fa-trash-o"></i></span>'
-                        ]).draw()
+                  targetRows.push([
+                      escapeHtml(record.first_name),
+                      escapeHtml(record.last_name),
+                      escapeHtml(record.email),
+                      escapeHtml(record.position),
+                      '<span style="cursor:pointer;"><i class="fa fa-trash-o"></i></span>'
+                  ])
                });
-
+                targets.DataTable().rows.add(targetRows).draw()
            })
            .error(function () {
                errorFlash("Error fetching group")
@ -233,8 +233,9 @@ function load() {
                    }]
                });
                groupTable.clear();
+                groupRows = []
                $.each(groups, function (i, group) {
-                    groupTable.row.add([
+                    groupRows.push([
                        escapeHtml(group.name),
                        escapeHtml(group.num_targets),
                        moment(group.modified_date).format('MMMM Do YYYY, h:mm:ss a'),
@ -244,8 +245,9 @@ function load() {
                    <button class='btn btn-danger' onclick='deleteGroup(" + group.id + ")'>\
                    <i class='fa fa-trash-o'></i>\
                    </button></div>"
-                    ]).draw()
+                    ])
                })
+                groupTable.rows.add(groupRows).draw()
            } else {
                $("#emptyMessage").show()
            }
@ -289,4 +291,4 @@ $(document).ready(function () {
        dismiss();
    });
    $("#csv-template").click(downloadCSVTemplate)
-});
+});
--- a/static/js/src/app/landing_pages.js
+++ b/static/js/src/app/landing_pages.js
@ -157,8 +157,9 @@ function load() {
                    }]
                });
                pagesTable.clear()
+                pageRows = []
                $.each(pages, function (i, page) {
-                    pagesTable.row.add([
+                    pageRows.push([
                        escapeHtml(page.name),
                        moment(page.modified_date).format('MMMM Do YYYY, h:mm:ss a'),
                        "<div class='pull-right'><span data-toggle='modal' data-backdrop='static' data-target='#modal'><button class='btn btn-primary' data-toggle='tooltip' data-placement='left' title='Edit Page' onclick='edit(" + i + ")'>\
@ -170,8 +171,9 @@ function load() {
                    <button class='btn btn-danger' data-toggle='tooltip' data-placement='left' title='Delete Page' onclick='deletePage(" + i + ")'>\
                    <i class='fa fa-trash-o'></i>\
                    </button></div>"
-                    ]).draw()
+                    ])
                })
+                pagesTable.rows.add(pageRows).draw()
                $('[data-toggle="tooltip"]').tooltip()
            } else {
                $("#emptyMessage").show()
@ -250,4 +252,4 @@ $(document).ready(function () {
    });

    load()
-})
+})
--- a/static/js/src/app/sending_profiles.js
+++ b/static/js/src/app/sending_profiles.js
@ -200,8 +200,9 @@ function load() {
                    }]
                });
                profileTable.clear()
+                profileRows = []
                $.each(profiles, function (i, profile) {
-                    profileTable.row.add([
+                    profileRows.push([
                        escapeHtml(profile.name),
                        profile.interface_type,
                        moment(profile.modified_date).format('MMMM Do YYYY, h:mm:ss a'),
@ -214,8 +215,9 @@ function load() {
                    <button class='btn btn-danger' data-toggle='tooltip' data-placement='left' title='Delete Profile' onclick='deleteProfile(" + i + ")'>\
                    <i class='fa fa-trash-o'></i>\
                    </button></div>"
-                    ]).draw()
+                    ])
                })
+                profileTable.rows.add(profileRows).draw()
                $('[data-toggle="tooltip"]').tooltip()
            } else {
                $("#emptyMessage").show()
@ -326,4 +328,4 @@ $(document).ready(function () {
            .draw();
    });
    load()
-})
+})
--- a/static/js/src/app/templates.js
+++ b/static/js/src/app/templates.js
@ -191,17 +191,19 @@ function edit(idx) {
        $("#subject").val(template.subject)
        $("#html_editor").val(template.html)
        $("#text_editor").val(template.text)
+        attachmentRows = []
        $.each(template.attachments, function (i, file) {
            var icon = icons[file.type] || "fa-file-o"
            // Add the record to the modal
-            attachmentsTable.row.add([
+            attachmentRows.push([
                '<i class="fa ' + icon + '"></i>',
                escapeHtml(file.name),
                '<span class="remove-row"><i class="fa fa-trash-o"></i></span>',
                file.content,
                file.type || "application/octet-stream"
-            ]).draw()
+            ])
        })
+        attachmentsTable.rows.add(attachmentRows).draw()
        if (template.html.indexOf("{{.Tracker}}") != -1) {
            $("#use_tracker_checkbox").prop("checked", true)
        } else {
@ -316,8 +318,9 @@ function load() {
                    }]
                });
                templateTable.clear()
+                templateRows = []
                $.each(templates, function (i, template) {
-                    templateTable.row.add([
+                    templateRows.push([
                        escapeHtml(template.name),
                        moment(template.modified_date).format('MMMM Do YYYY, h:mm:ss a'),
                        "<div class='pull-right'><span data-toggle='modal' data-backdrop='static' data-target='#modal'><button class='btn btn-primary' data-toggle='tooltip' data-placement='left' title='Edit Template' onclick='edit(" + i + ")'>\
@ -329,8 +332,9 @@ function load() {
                    <button class='btn btn-danger' data-toggle='tooltip' data-placement='left' title='Delete Template' onclick='deleteTemplate(" + i + ")'>\
                    <i class='fa fa-trash-o'></i>\
                    </button></div>"
-                    ]).draw()
+                    ])
                })
+                templateTable.rows.add(templateRows).draw()
                $('[data-toggle="tooltip"]').tooltip()
            } else {
                $("#emptyMessage").show()
@ -408,4 +412,4 @@ $(document).ready(function () {
    });
    load()

-})
+})
--- a/static/js/src/app/users.js
+++ b/static/js/src/app/users.js
@ -181,8 +181,9 @@ const load = () => {
                }]
            });
            userTable.clear();
+            userRows = []
            $.each(users, (i, user) => {
-                userTable.row.add([
+                userRows.push([
                    escapeHtml(user.username),
                    escapeHtml(user.role.name),
                    "<div class='pull-right'>\
@ -195,8 +196,9 @@ const load = () => {
                    <button class='btn btn-danger delete_button' data-user-id='" + user.id + "'>\
                    <i class='fa fa-trash-o'></i>\
                    </button></div>"
-                ]).draw()
+                ])
            })
+            userTable.rows.add(userRows).draw();
        })
        .error(() => {
            errorFlash("Error fetching users")