@keenthemes/ktui 1.0.24 → 1.0.26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/ktui.js +337 -18
- package/dist/ktui.min.js +1 -1
- package/dist/ktui.min.js.map +1 -1
- package/dist/styles.css +319 -11
- package/examples/datatable/checkbox-events-test.html +400 -0
- package/examples/datatable/credentials-test.html +423 -0
- package/examples/datatable/remote-checkbox-test.html +365 -0
- package/examples/modal/persistent-test.html +205 -0
- package/examples/select/dark-mode-test.html +93 -0
- package/examples/select/dropdowncontainer-test.html +111 -0
- package/examples/select/dynamic-methods.html +273 -0
- package/examples/select/formdata-remote-test.html +161 -0
- package/examples/select/modal-positioning-test.html +336 -0
- package/examples/select/remote-data-preselected.html +283 -0
- package/lib/cjs/components/datatable/datatable-checkbox.js +16 -3
- package/lib/cjs/components/datatable/datatable-checkbox.js.map +1 -1
- package/lib/cjs/components/datatable/datatable.js +3 -5
- package/lib/cjs/components/datatable/datatable.js.map +1 -1
- package/lib/cjs/components/image-input/image-input.js.map +1 -1
- package/lib/cjs/components/modal/modal.js +3 -1
- package/lib/cjs/components/modal/modal.js.map +1 -1
- package/lib/cjs/components/select/config.js +5 -0
- package/lib/cjs/components/select/config.js.map +1 -1
- package/lib/cjs/components/select/dropdown.js +25 -2
- package/lib/cjs/components/select/dropdown.js.map +1 -1
- package/lib/cjs/components/select/select.js +285 -7
- package/lib/cjs/components/select/select.js.map +1 -1
- package/lib/cjs/components/select/templates.js.map +1 -1
- package/lib/esm/components/datatable/datatable-checkbox.js +16 -3
- package/lib/esm/components/datatable/datatable-checkbox.js.map +1 -1
- package/lib/esm/components/datatable/datatable.js +3 -5
- package/lib/esm/components/datatable/datatable.js.map +1 -1
- package/lib/esm/components/image-input/image-input.js.map +1 -1
- package/lib/esm/components/modal/modal.js +3 -1
- package/lib/esm/components/modal/modal.js.map +1 -1
- package/lib/esm/components/select/config.js +5 -0
- package/lib/esm/components/select/config.js.map +1 -1
- package/lib/esm/components/select/dropdown.js +25 -2
- package/lib/esm/components/select/dropdown.js.map +1 -1
- package/lib/esm/components/select/select.js +285 -7
- package/lib/esm/components/select/select.js.map +1 -1
- package/lib/esm/components/select/templates.js.map +1 -1
- package/package.json +1 -1
- package/src/components/datatable/datatable-checkbox.ts +18 -3
- package/src/components/datatable/datatable.ts +3 -0
- package/src/components/datatable/types.ts +1 -0
- package/src/components/image-input/image-input.ts +12 -15
- package/src/components/modal/modal.ts +5 -1
- package/src/components/select/config.ts +6 -0
- package/src/components/select/dropdown.ts +32 -3
- package/src/components/select/select.css +4 -4
- package/src/components/select/select.ts +350 -9
- package/src/components/select/templates.ts +2 -1
|
@@ -0,0 +1,400 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8">
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
+
<title>DataTable Checkbox Events Test</title>
|
|
8
|
+
<link rel="stylesheet" href="../../dist/styles.css">
|
|
9
|
+
</head>
|
|
10
|
+
|
|
11
|
+
<body class="bg-gray-50 min-h-screen p-4">
|
|
12
|
+
<div class="container mx-auto max-w-5xl">
|
|
13
|
+
<div class="bg-white rounded-lg shadow-lg p-8 mt-6 border border-gray-200">
|
|
14
|
+
<div class="mb-6">
|
|
15
|
+
<h1 class="text-xl font-bold text-gray-900">DataTable Checkbox Events Test</h1>
|
|
16
|
+
</div>
|
|
17
|
+
|
|
18
|
+
<!-- Current Selection Display -->
|
|
19
|
+
<div class="mb-6">
|
|
20
|
+
<h2 class="text-lg font-semibold text-gray-800 mb-3">Current Selection</h2>
|
|
21
|
+
<div id="selectionDisplay" class="bg-blue-50 border border-blue-200 rounded-md p-4">
|
|
22
|
+
<div class="text-gray-700">
|
|
23
|
+
<strong>Checked IDs:</strong> <span id="checkedIds" class="font-mono">[]</span>
|
|
24
|
+
</div>
|
|
25
|
+
<div class="text-gray-700 mt-2">
|
|
26
|
+
<strong>Count:</strong> <span id="checkedCount" class="font-semibold">0</span>
|
|
27
|
+
</div>
|
|
28
|
+
</div>
|
|
29
|
+
</div>
|
|
30
|
+
|
|
31
|
+
<!-- Test Controls -->
|
|
32
|
+
<div class="mb-6 flex gap-3 flex-wrap">
|
|
33
|
+
<button
|
|
34
|
+
onclick="testCheckAll()"
|
|
35
|
+
class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors font-medium">
|
|
36
|
+
Check All
|
|
37
|
+
</button>
|
|
38
|
+
<button
|
|
39
|
+
onclick="testUncheckAll()"
|
|
40
|
+
class="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition-colors font-medium">
|
|
41
|
+
Uncheck All
|
|
42
|
+
</button>
|
|
43
|
+
<button
|
|
44
|
+
onclick="testToggle()"
|
|
45
|
+
class="px-4 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700 transition-colors font-medium">
|
|
46
|
+
Toggle All
|
|
47
|
+
</button>
|
|
48
|
+
</div>
|
|
49
|
+
|
|
50
|
+
<!-- DataTable Container -->
|
|
51
|
+
<div class="kt-card">
|
|
52
|
+
<div class="kt-card-table" data-kt-datatable="true" data-kt-datatable-page-size="5">
|
|
53
|
+
<div class="kt-table-wrapper kt-scrollable">
|
|
54
|
+
<table id="checkbox-test-table" class="kt-table" data-kt-datatable-table="true">
|
|
55
|
+
<thead>
|
|
56
|
+
<tr>
|
|
57
|
+
<th scope="col" class="w-12">
|
|
58
|
+
<input
|
|
59
|
+
type="checkbox"
|
|
60
|
+
data-kt-datatable-check="true"
|
|
61
|
+
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2">
|
|
62
|
+
</th>
|
|
63
|
+
<th scope="col" class="w-20" data-kt-datatable-column="id">
|
|
64
|
+
<span class="kt-table-col">
|
|
65
|
+
<span class="kt-table-col-label">ID</span>
|
|
66
|
+
</span>
|
|
67
|
+
</th>
|
|
68
|
+
<th scope="col" class="w-40" data-kt-datatable-column="name">
|
|
69
|
+
<span class="kt-table-col">
|
|
70
|
+
<span class="kt-table-col-label">Name</span>
|
|
71
|
+
</span>
|
|
72
|
+
</th>
|
|
73
|
+
<th scope="col" class="w-48" data-kt-datatable-column="email">
|
|
74
|
+
<span class="kt-table-col">
|
|
75
|
+
<span class="kt-table-col-label">Email</span>
|
|
76
|
+
</span>
|
|
77
|
+
</th>
|
|
78
|
+
<th scope="col" class="w-32" data-kt-datatable-column="department">
|
|
79
|
+
<span class="kt-table-col">
|
|
80
|
+
<span class="kt-table-col-label">Department</span>
|
|
81
|
+
</span>
|
|
82
|
+
</th>
|
|
83
|
+
<th scope="col" class="w-24" data-kt-datatable-column="status">
|
|
84
|
+
<span class="kt-table-col">
|
|
85
|
+
<span class="kt-table-col-label">Status</span>
|
|
86
|
+
</span>
|
|
87
|
+
</th>
|
|
88
|
+
</tr>
|
|
89
|
+
</thead>
|
|
90
|
+
<tbody>
|
|
91
|
+
<tr>
|
|
92
|
+
<td>
|
|
93
|
+
<input
|
|
94
|
+
type="checkbox"
|
|
95
|
+
data-kt-datatable-row-check="true"
|
|
96
|
+
value="1"
|
|
97
|
+
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2">
|
|
98
|
+
</td>
|
|
99
|
+
<td>1</td>
|
|
100
|
+
<td>John Doe</td>
|
|
101
|
+
<td>john.doe@example.com</td>
|
|
102
|
+
<td>Engineering</td>
|
|
103
|
+
<td><span class="kt-badge kt-badge-success">Active</span></td>
|
|
104
|
+
</tr>
|
|
105
|
+
<tr>
|
|
106
|
+
<td>
|
|
107
|
+
<input
|
|
108
|
+
type="checkbox"
|
|
109
|
+
data-kt-datatable-row-check="true"
|
|
110
|
+
value="2"
|
|
111
|
+
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2">
|
|
112
|
+
</td>
|
|
113
|
+
<td>2</td>
|
|
114
|
+
<td>Jane Smith</td>
|
|
115
|
+
<td>jane.smith@example.com</td>
|
|
116
|
+
<td>Marketing</td>
|
|
117
|
+
<td><span class="kt-badge kt-badge-success">Active</span></td>
|
|
118
|
+
</tr>
|
|
119
|
+
<tr>
|
|
120
|
+
<td>
|
|
121
|
+
<input
|
|
122
|
+
type="checkbox"
|
|
123
|
+
data-kt-datatable-row-check="true"
|
|
124
|
+
value="3"
|
|
125
|
+
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2">
|
|
126
|
+
</td>
|
|
127
|
+
<td>3</td>
|
|
128
|
+
<td>Mike Johnson</td>
|
|
129
|
+
<td>mike.johnson@example.com</td>
|
|
130
|
+
<td>Engineering</td>
|
|
131
|
+
<td><span class="kt-badge kt-badge-destructive">Inactive</span></td>
|
|
132
|
+
</tr>
|
|
133
|
+
<tr>
|
|
134
|
+
<td>
|
|
135
|
+
<input
|
|
136
|
+
type="checkbox"
|
|
137
|
+
data-kt-datatable-row-check="true"
|
|
138
|
+
value="4"
|
|
139
|
+
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2">
|
|
140
|
+
</td>
|
|
141
|
+
<td>4</td>
|
|
142
|
+
<td>Sarah Wilson</td>
|
|
143
|
+
<td>sarah.wilson@example.com</td>
|
|
144
|
+
<td>Sales</td>
|
|
145
|
+
<td><span class="kt-badge kt-badge-success">Active</span></td>
|
|
146
|
+
</tr>
|
|
147
|
+
<tr>
|
|
148
|
+
<td>
|
|
149
|
+
<input
|
|
150
|
+
type="checkbox"
|
|
151
|
+
data-kt-datatable-row-check="true"
|
|
152
|
+
value="5"
|
|
153
|
+
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2">
|
|
154
|
+
</td>
|
|
155
|
+
<td>5</td>
|
|
156
|
+
<td>David Brown</td>
|
|
157
|
+
<td>david.brown@example.com</td>
|
|
158
|
+
<td>HR</td>
|
|
159
|
+
<td><span class="kt-badge kt-badge-success">Active</span></td>
|
|
160
|
+
</tr>
|
|
161
|
+
<tr>
|
|
162
|
+
<td>
|
|
163
|
+
<input
|
|
164
|
+
type="checkbox"
|
|
165
|
+
data-kt-datatable-row-check="true"
|
|
166
|
+
value="6"
|
|
167
|
+
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2">
|
|
168
|
+
</td>
|
|
169
|
+
<td>6</td>
|
|
170
|
+
<td>Lisa Davis</td>
|
|
171
|
+
<td>lisa.davis@example.com</td>
|
|
172
|
+
<td>Engineering</td>
|
|
173
|
+
<td><span class="kt-badge kt-badge-primary">Verified</span></td>
|
|
174
|
+
</tr>
|
|
175
|
+
<tr>
|
|
176
|
+
<td>
|
|
177
|
+
<input
|
|
178
|
+
type="checkbox"
|
|
179
|
+
data-kt-datatable-row-check="true"
|
|
180
|
+
value="7"
|
|
181
|
+
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2">
|
|
182
|
+
</td>
|
|
183
|
+
<td>7</td>
|
|
184
|
+
<td>Tom Anderson</td>
|
|
185
|
+
<td>tom.anderson@example.com</td>
|
|
186
|
+
<td>Marketing</td>
|
|
187
|
+
<td><span class="kt-badge kt-badge-destructive">Inactive</span></td>
|
|
188
|
+
</tr>
|
|
189
|
+
<tr>
|
|
190
|
+
<td>
|
|
191
|
+
<input
|
|
192
|
+
type="checkbox"
|
|
193
|
+
data-kt-datatable-row-check="true"
|
|
194
|
+
value="8"
|
|
195
|
+
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2">
|
|
196
|
+
</td>
|
|
197
|
+
<td>8</td>
|
|
198
|
+
<td>Emma Taylor</td>
|
|
199
|
+
<td>emma.taylor@example.com</td>
|
|
200
|
+
<td>Sales</td>
|
|
201
|
+
<td><span class="kt-badge kt-badge-success">Active</span></td>
|
|
202
|
+
</tr>
|
|
203
|
+
<tr>
|
|
204
|
+
<td>
|
|
205
|
+
<input
|
|
206
|
+
type="checkbox"
|
|
207
|
+
data-kt-datatable-row-check="true"
|
|
208
|
+
value="9"
|
|
209
|
+
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2">
|
|
210
|
+
</td>
|
|
211
|
+
<td>9</td>
|
|
212
|
+
<td>Chris Miller</td>
|
|
213
|
+
<td>chris.miller@example.com</td>
|
|
214
|
+
<td>Engineering</td>
|
|
215
|
+
<td><span class="kt-badge kt-badge-success">Active</span></td>
|
|
216
|
+
</tr>
|
|
217
|
+
<tr>
|
|
218
|
+
<td>
|
|
219
|
+
<input
|
|
220
|
+
type="checkbox"
|
|
221
|
+
data-kt-datatable-row-check="true"
|
|
222
|
+
value="10"
|
|
223
|
+
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2">
|
|
224
|
+
</td>
|
|
225
|
+
<td>10</td>
|
|
226
|
+
<td>Amy Garcia</td>
|
|
227
|
+
<td>amy.garcia@example.com</td>
|
|
228
|
+
<td>HR</td>
|
|
229
|
+
<td><span class="kt-badge kt-badge-success">Active</span></td>
|
|
230
|
+
</tr>
|
|
231
|
+
</tbody>
|
|
232
|
+
</table>
|
|
233
|
+
</div>
|
|
234
|
+
|
|
235
|
+
<!-- Pagination Info -->
|
|
236
|
+
<div class="flex items-center justify-between mt-4">
|
|
237
|
+
<div class="flex items-center space-x-2">
|
|
238
|
+
<span class="text-sm text-gray-700">Show</span>
|
|
239
|
+
<select data-kt-datatable-size="true" class="border border-gray-300 rounded px-2 py-1 bg-white text-gray-900">
|
|
240
|
+
<option value="5">5</option>
|
|
241
|
+
<option value="10" selected>10</option>
|
|
242
|
+
<option value="20">20</option>
|
|
243
|
+
<option value="50">50</option>
|
|
244
|
+
</select>
|
|
245
|
+
<span class="text-sm text-gray-700">entries</span>
|
|
246
|
+
</div>
|
|
247
|
+
<div data-kt-datatable-info="true" class="text-sm text-gray-700"></div>
|
|
248
|
+
</div>
|
|
249
|
+
|
|
250
|
+
<!-- Pagination Controls -->
|
|
251
|
+
<div class="flex justify-center mt-4">
|
|
252
|
+
<div data-kt-datatable-pagination="true" class="flex space-x-1"></div>
|
|
253
|
+
</div>
|
|
254
|
+
</div>
|
|
255
|
+
</div>
|
|
256
|
+
</div>
|
|
257
|
+
|
|
258
|
+
<!-- Event Log Section -->
|
|
259
|
+
<div class="bg-white rounded-lg shadow-lg p-8 mt-6 border border-gray-200">
|
|
260
|
+
<div class="flex items-center justify-between mb-3">
|
|
261
|
+
<h2 class="text-lg font-semibold text-gray-800">Event Log</h2>
|
|
262
|
+
<button
|
|
263
|
+
id="clearLog"
|
|
264
|
+
onclick="clearEventLog()"
|
|
265
|
+
class="px-3 py-1 text-sm bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition-colors">
|
|
266
|
+
Clear Log
|
|
267
|
+
</button>
|
|
268
|
+
</div>
|
|
269
|
+
<div id="eventLog" class="bg-gray-50 border border-gray-200 rounded-md p-4 h-64 overflow-y-auto font-mono text-sm">
|
|
270
|
+
<div class="text-gray-500">No events yet. Interact with checkboxes to see events...</div>
|
|
271
|
+
</div>
|
|
272
|
+
</div>
|
|
273
|
+
</div>
|
|
274
|
+
|
|
275
|
+
<script src="../../dist/ktui.js"></script>
|
|
276
|
+
<script>
|
|
277
|
+
let datatableInstance = null;
|
|
278
|
+
|
|
279
|
+
// Event log helper functions
|
|
280
|
+
function addEventLog(eventName, details = '') {
|
|
281
|
+
const logElement = document.getElementById('eventLog');
|
|
282
|
+
const timestamp = new Date().toLocaleTimeString();
|
|
283
|
+
const logEntry = document.createElement('div');
|
|
284
|
+
logEntry.className = 'mb-2 pb-2 border-b border-gray-200';
|
|
285
|
+
|
|
286
|
+
let eventColor = 'text-gray-700';
|
|
287
|
+
if (eventName === 'checked') {
|
|
288
|
+
eventColor = 'text-green-600';
|
|
289
|
+
} else if (eventName === 'unchecked') {
|
|
290
|
+
eventColor = 'text-red-600';
|
|
291
|
+
} else if (eventName === 'changed') {
|
|
292
|
+
eventColor = 'text-blue-600';
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
logEntry.innerHTML = `
|
|
296
|
+
<div class="flex items-start gap-2">
|
|
297
|
+
<span class="text-gray-500 text-xs">[${timestamp}]</span>
|
|
298
|
+
<span class="font-semibold ${eventColor}">${eventName.toUpperCase()}</span>
|
|
299
|
+
${details ? `<span class="text-gray-600">${details}</span>` : ''}
|
|
300
|
+
</div>
|
|
301
|
+
`;
|
|
302
|
+
|
|
303
|
+
// Remove "No events yet" message if it exists
|
|
304
|
+
const firstChild = logElement.firstChild;
|
|
305
|
+
if (firstChild && firstChild.textContent.includes('No events yet')) {
|
|
306
|
+
logElement.removeChild(firstChild);
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
logElement.insertBefore(logEntry, logElement.firstChild);
|
|
310
|
+
|
|
311
|
+
// Keep only last 50 entries
|
|
312
|
+
while (logElement.children.length > 50) {
|
|
313
|
+
logElement.removeChild(logElement.lastChild);
|
|
314
|
+
}
|
|
315
|
+
}
|
|
316
|
+
|
|
317
|
+
function clearEventLog() {
|
|
318
|
+
const logElement = document.getElementById('eventLog');
|
|
319
|
+
logElement.innerHTML = '<div class="text-gray-500">No events yet. Interact with checkboxes to see events...</div>';
|
|
320
|
+
}
|
|
321
|
+
|
|
322
|
+
function updateSelectionDisplay() {
|
|
323
|
+
if (!datatableInstance) return;
|
|
324
|
+
const checkedIds = datatableInstance.getChecked();
|
|
325
|
+
document.getElementById('checkedIds').textContent = JSON.stringify(checkedIds);
|
|
326
|
+
document.getElementById('checkedCount').textContent = checkedIds.length;
|
|
327
|
+
}
|
|
328
|
+
|
|
329
|
+
// Test functions
|
|
330
|
+
function testCheckAll() {
|
|
331
|
+
if (datatableInstance) {
|
|
332
|
+
datatableInstance.check();
|
|
333
|
+
}
|
|
334
|
+
}
|
|
335
|
+
|
|
336
|
+
function testUncheckAll() {
|
|
337
|
+
if (datatableInstance) {
|
|
338
|
+
datatableInstance.uncheck();
|
|
339
|
+
}
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
function testToggle() {
|
|
343
|
+
if (datatableInstance) {
|
|
344
|
+
datatableInstance.toggle();
|
|
345
|
+
}
|
|
346
|
+
}
|
|
347
|
+
|
|
348
|
+
// Initialize the datatable when page loads
|
|
349
|
+
document.addEventListener('DOMContentLoaded', function() {
|
|
350
|
+
setTimeout(() => {
|
|
351
|
+
try {
|
|
352
|
+
// Initialize KTUI components
|
|
353
|
+
if (typeof KTDataTable !== 'undefined') {
|
|
354
|
+
KTDataTable.init();
|
|
355
|
+
}
|
|
356
|
+
|
|
357
|
+
// Get the datatable instance
|
|
358
|
+
const container = document.querySelector('[data-kt-datatable="true"]');
|
|
359
|
+
if (container) {
|
|
360
|
+
datatableInstance = KTDataTable.getInstance(container);
|
|
361
|
+
if (datatableInstance) {
|
|
362
|
+
console.log('✅ DataTable initialized successfully!');
|
|
363
|
+
|
|
364
|
+
// Attach event listeners for all checkbox events
|
|
365
|
+
datatableInstance.on('checked', function(event) {
|
|
366
|
+
const checkedIds = datatableInstance.getChecked();
|
|
367
|
+
addEventLog('checked', `Selected ${checkedIds.length} rows: [${checkedIds.join(', ')}]`);
|
|
368
|
+
updateSelectionDisplay();
|
|
369
|
+
});
|
|
370
|
+
|
|
371
|
+
datatableInstance.on('unchecked', function(event) {
|
|
372
|
+
const checkedIds = datatableInstance.getChecked();
|
|
373
|
+
addEventLog('unchecked', `Deselected. Remaining: ${checkedIds.length} rows: [${checkedIds.join(', ')}]`);
|
|
374
|
+
updateSelectionDisplay();
|
|
375
|
+
});
|
|
376
|
+
|
|
377
|
+
datatableInstance.on('changed', function(event) {
|
|
378
|
+
const checkedIds = datatableInstance.getChecked();
|
|
379
|
+
addEventLog('changed', `Selection changed. Total: ${checkedIds.length} rows: [${checkedIds.join(', ')}]`);
|
|
380
|
+
updateSelectionDisplay();
|
|
381
|
+
});
|
|
382
|
+
|
|
383
|
+
// Initial display update
|
|
384
|
+
updateSelectionDisplay();
|
|
385
|
+
} else {
|
|
386
|
+
console.error('❌ Failed to get DataTable instance');
|
|
387
|
+
}
|
|
388
|
+
} else {
|
|
389
|
+
console.error('❌ DataTable container not found');
|
|
390
|
+
}
|
|
391
|
+
} catch (error) {
|
|
392
|
+
console.error('❌ Error initializing DataTable: ' + error.message);
|
|
393
|
+
}
|
|
394
|
+
}, 100);
|
|
395
|
+
});
|
|
396
|
+
</script>
|
|
397
|
+
</body>
|
|
398
|
+
|
|
399
|
+
</html>
|
|
400
|
+
|