corbz/PYRSS-Website
corbz/PYRSS-Website
1
0
Fork 0
Code Issues 21 Pull Requests Actions Releases 1 Wiki Activity

indeterminate select-all checkbox

Browse Source
This commit is contained in:
Corban-Lee Jones 2024-04-24 10:23:45 +01:00
parent aca4a65a73
commit 3531a47b68
1 changed files with 31 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
apps/static/js/home/subscriptions.js
View File

@ -22,12 +22,12 @@ function initSubscriptionTable() {
columns: [
{
// Select row checkbox column
title: '<input type="checkbox" class="form-check-input" />',
title: '<input type="checkbox" class="form-check-input table-select-all mt-0" />',
data: null,
orderable: false,
className: "text-center",
render: function() {
return '<input type="checkbox" class="form-check-input" />'
return '<input type="checkbox" class="form-check-input table-select-row mt-0" />'
}
},
{ title: "Name", data: "name" },
@ -49,9 +49,9 @@ function initSubscriptionTable() {
orderable: false,
className: "text-center",
render: function(data, type) {
return `<input type="checkbox" class="form-check-input" ${data ? "checked" : ""} />`
return `<input type="checkbox" class="form-check-input mt-0" ${data ? "checked" : ""} />`
}
},
}
]
});
@ -91,8 +91,23 @@ function initSubscriptionTable() {
]).draw(false);
}
// Determine and apply the state of the 'select all' checkbox
// indeterminate, checked or neither
function determineSelectAllState() {
var selectedRowsCount = subTable.rows(".selected").data().toArray().length;
allRowsCount = subTable.rows().data().toArray().length;
selectAllCheckbox = $("#subTable thead .table-select-all");
checked = selectedRowsCount === allRowsCount;
indeterminate = !checked && selectedRowsCount > 0;
selectAllCheckbox.prop("checked", checked);
selectAllCheckbox.prop("indeterminate", indeterminate);
}
// Select a row via checkbox
$("#subTable tbody").on("change", "tr td:first-child .form-check-input", function() {
$("#subTable").on("change", "tbody tr .table-select-row", function() {
var selected = $(this).prop("checked");
rowIndex = $(this).closest("tr").index();
@ -100,10 +115,12 @@ $("#subTable tbody").on("change", "tr td:first-child .form-check-input", functio
if (selected) row.select();
else row.deselect();
determineSelectAllState();
});
// Select all rows checkbox
$('#subTable thead th:first-child input[type="checkbox"]').on("change", function() {
$("#subTable").on("change", "thead .table-select-all", function() {
var selected = $(this).prop("checked");
$('#subTable tbody tr').each(function(rowIndex) {
var row = subTable.row(rowIndex)
@ -111,12 +128,19 @@ $('#subTable thead th:first-child input[type="checkbox"]').on("change", function
if (selected) row.select();
else row.deselect();
$(this).find('td input[type="checkbox"]').prop("checked", selected);
$(this).find('.table-select-row').prop("checked", selected);
});
determineSelectAllState();
});
// Alert the number of selected rows
$("#tableButton").on("click", function() {
var selectedRows = subTable.rows({ selected: true }).data(false).toArray();
alert(selectedRows.length + " row(s) are selected");
});
// Open new subscription modal
$("#tableAddRowBtn").on("click", function() {
$("#subFormModal").modal("show");
});