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.
pull/1831/head
Prasoon Dwivedi 2020-05-04 08:33:58 +05:30 committed by GitHub
parent 38a6a77c9c
commit 116c2a7e7e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 48 additions and 32 deletions

View File

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

View File

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

View File

@ -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([
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>'
]).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()
}

View File

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

View File

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

View File

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

View File

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