1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
|
/** Handlers for events in datatables **/
var dtAddRowSelectionHandler = (tableId) => {
$(tableId).on("draw.dt", (event) => {
$(".chk-row-select").on("change", (event) => {
var checkboxOrRadio = event.target;
var tablerow = checkboxOrRadio.parentElement.parentElement;
var tableclass = tablerow.getAttribute("class");
if(checkboxOrRadio.checked) {
if (checkboxOrRadio.type == "radio") {
$(tableId + " tr").each((index, row) => {
var rowKlass = $(row).attr("class") || "";
row.setAttribute(
"class", rowKlass.replaceAll("selected", "").trim());
});
}
tablerow.setAttribute("class", `${tableclass} selected`);
}
else {
tablerow.setAttribute(
"class", tableclass.replaceAll("selected", "").trim());
}
});
});
};
var toggleCheck = (checkboxOrRadio) => {
if (checkboxOrRadio.length > 0) {
var currentState = checkboxOrRadio.prop("checked");
var newState = !currentState;
if (currentState == true && checkboxOrRadio.attr("type").toLowerCase() == "radio") {
// We don't want to toggle from true to false by clicking on the row
// if it is a radio button.
newState = currentState;
}
checkboxOrRadio.prop("checked", newState);
checkboxOrRadio.trigger("change");
}
};
var dtAddRowClickHandler = (tableId) => {
$(tableId).on("draw.dt", (event) => {
$(tableId + " tbody tr").on("click", (event) => {
var row = event.target.closest("tr");
var checkboxOrRadio = $(row).find(".chk-row-select");
toggleCheck(checkboxOrRadio);
});
});
};
var dtAddCommonHandlers = (tableId) => {
dtAddRowSelectionHandler(tableId);
dtAddRowClickHandler(tableId);
};
var addTableLength = (menuList, lengthToAdd, dataLength) => {
if(dataLength >= lengthToAdd) {
newList = structuredClone(menuList);//menuList.slice(0, menuList.length); // shallow copy
newList.push(lengthToAdd);
return newList;
}
return menuList;
};
var defaultLengthMenu = (data) => {
menuList = []
var lengths = [10, 25, 50, 100, 1000, data.length];
lengths.forEach((len) => {
menuList = addTableLength(menuList, len, data.length);
});
return menuList;
};
var buildDataTable = (tableId, data = [], columns = [], userSettings = {}) => {
var defaultSettings = {
responsive: true,
/* == Scroller settings == */
scroller: true,
paging: true, // MUST be true for scroller to work
sDom: "iti",
scrollY: "100vh",
scrollCollapse: true,
/* == END: Scroller settings == */
lengthMenu: defaultLengthMenu(data),
language: {
processing: "Processing… Please wait.",
loadingRecords: "Loading population — Please wait.",
lengthMenu: "Show _MENU_ populations",
info: "Showing _START_ to _END_ of _TOTAL_ populations"
},
data: data,
columns: columns,
drawCallback: (settings) => {
$(this[0]).find("tbody tr").each((idx, row) => {
var arow = $(row);
var checkboxOrRadio = arow.find(".chk-row-select");
if (checkboxOrRadio) {
if (arow.hasClass("selected")) {
checkboxOrRadio.prop("checked", true);
} else {
checkboxOrRadio.prop("checked", false);
}
}
});
}
}
var theDataTable = $(tableId).DataTable({
...defaultSettings,
...userSettings
});
return theDataTable;
};
|
