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.

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()
             }

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
+                    // Add it to the list
-                    campaignTable.row.add([
+                    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)

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()
+                  targetRows.push([
-                        .row.add([
+                      escapeHtml(record.first_name),
-                            escapeHtml(record.first_name),
+                      escapeHtml(record.last_name),
-                            escapeHtml(record.last_name),
+                      escapeHtml(record.email),
-                            escapeHtml(record.email),
+                      escapeHtml(record.position),
-                            escapeHtml(record.position),
+                      '<span style="cursor:pointer;"><i class="fa fa-trash-o"></i></span>'
-                            '<span style="cursor:pointer;"><i class="fa fa-trash-o"></i></span>'
+                  ])
-                        ]).draw()
                 });
-
+                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()
             }

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()

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()

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()

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")