# | Name | Designation | Department | Ext | Direct Number |
---|
An error occurred while processing the template.
Denied access to method or field getParameter of class org.apache.catalina.core.ApplicationHttpRequest ---- FTL stack trace ("~" means nesting-related): - Failed at: #assign pageParam = request.getParame... [in template "57581103840604#20120#279200" at line 1, column 1] ----
1<#assign pageParam = request.getParameter("page_number_70a6a1a7-376f-0abb-d4f5-a3f1f6b97dd8")!"" />
2<#assign pageNumber = (pageParam?length > 0)?then(pageParam?number, 1)>
3<#assign itemsPerPage = 20>
4<#assign startingSerialNumber = (pageNumber - 1) * itemsPerPage>
5
6<table class="custom-table">
7 <colgroup>
8 <col class="col-width smallest">
9 <col class="col-width largest">
10 <col class="col-width medium">
11 <col class="col-width medium">
12 <col class="col-width small">
13 <col class="col-width medium">
14 <col class="col-width largest">
15 </colgroup>
16 <tbody id="staff-table-body">
17
18 <#assign rawDesignation = StaffListDesignation.getData()!"" />
19 <#if rawDesignation?contains("-")>
20 <#assign cleanedDesignation = rawDesignation?substring(rawDesignation?index_of("-") + 1)?trim />
21 <#else>
22 <#assign cleanedDesignation = rawDesignation />
23 </#if>
24
25 <tr class="staff-row main-row">
26 <td class="table-cell serial-number"></td>
27 <td class="table-cell"><p>${.vars["reserved-article-title"].data}</p></td>
28 <td class="table-cell">${cleanedDesignation}</td>
29 <td class="table-cell">${StaffListDepartment.getData()!""}</td>
30 <td class="table-cell">${StaffListExt.getData()!""}</td>
31 <td class="table-cell">${StaffListDirectNumber.getData()!""}</td>
32 <td class="table-cell">${StaffListEmail.getData()!""}</td>
33 </tr>
34
35 <#if getterUtil.getBoolean(HasSecretary.getData())>
36 <tr class="staff-row secretary-row">
37 <td class="table-cell"></td>
38 <td class="table-cell">${PSDetails.PSNameDesignation.getData()!""}</td>
39 <td class="table-cell"><em>Secretary</em></td>
40 <td class="table-cell">${PSDetails.PSDepartment.getData()!""}</td>
41 <td class="table-cell">${PSDetails.PSExt.getData()!""}</td>
42 <td class="table-cell">${PSDetails.PSDirectNumber.getData()!""}</td>
43 <td class="table-cell">${PSDetails.PSEmail.getData()!""}</td>
44 </tr>
45 </#if>
46
47 </tbody>
48</table>
49
50<script>
51document.addEventListener("DOMContentLoaded", function () {
52 const startingSerialNumber = ${startingSerialNumber}; // Freemarker value
53
54 function assignSerialNumbers() {
55 let rowCounter = startingSerialNumber;
56 const mainRows = document.querySelectorAll("#staff-table-body .main-row");
57
58 mainRows.forEach((mainRow) => {
59 rowCounter++;
60 const serialCell = mainRow.querySelector(".serial-number");
61 if (serialCell) {
62 serialCell.textContent = rowCounter;
63 }
64
65 const isEven = rowCounter % 2 === 0;
66 const colorClass = isEven ? "even-row" : "odd-row";
67
68 mainRow.classList.remove("even-row", "odd-row");
69 mainRow.classList.add(colorClass);
70
71 const nextRow = mainRow.nextElementSibling;
72 if (nextRow && nextRow.classList.contains("secretary-row")) {
73 nextRow.classList.remove("even-row", "odd-row");
74 nextRow.classList.add(colorClass);
75 }
76 });
77 }
78
79 assignSerialNumbers(); // Initial call
80
81 // Optional: reassign after sorting
82 // If you have sorting logic, call assignSerialNumbers() after sorting completes
83
84 document.querySelectorAll("#staff-table-body a").forEach(link => {
85 link.addEventListener("click", function (event) {
86 event.preventDefault();
87 window.open(link.href, '_blank');
88 });
89 });
90});
91</script>
92
93
94<style>
95.custom-table {
96 width: 100%;
97 border-collapse: collapse;
98 text-align: left;
99 border: 1px solid #ddd;
100 font-family: Arial, sans-serif;
101 table-layout: fixed;
102}
103
104.col-width.smallest { width: 5%; }
105.col-width.largest { width: 25%; }
106.col-width.medium { width: 15%; }
107.col-width.small { width: 10%; }
108
109.table-cell {
110 padding: 12px;
111 border: 1px solid #ddd;
112 vertical-align: top;
113 word-wrap: break-word;
114 white-space: normal;
115 overflow-wrap: break-word;
116}
117
118.even-row {
119 background-color: #f9f9f9;
120}
121
122.odd-row {
123 background-color: #ffffff;
124}
125
126.secretary-row td {
127 font-style: italic;
128}
129
130.table-cell p,
131.table-cell a {
132 margin: 0;
133 padding: 0;
134 color: inherit;
135 display: inline-block;
136 vertical-align: middle;
137}
138
139@media (max-width: 768px) {
140 .custom-table {
141 display: block;
142 overflow-x: auto;
143 }
144
145 .staff-row {
146 display: table-row;
147 }
148
149 .table-cell {
150 padding: 8px;
151 border: 1px solid #ddd;
152 }
153
154 .secretary-row td {
155 padding: 8px;
156 border: 1px solid #ddd;
157 }
158}
159</style>