Untitled
unknown
html
2 years ago
4.6 kB
3
Indexable
<!DOCTYPE html>
<html>
<head>
<title>DataTables voorbeeld</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.11.3/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.11.3/datatables.min.js"></script>
</head>
<body>
<div class="boub">
<p class="section-sub-title">
<input type="text" id="JBput" placeholder="Zoek hier op een kolomnaam..." title="Type in a name" onkeyup="myFunction()">
</p>
<div style="padding-bottom: 8px; padding-top: 1px">
<div id="IDX" style="padding-bottom: 8px; padding-top: 1px">
<div style="padding-bottom: 8px; padding-top: 1px">
<table id="JBtable" class="table" style="border-spacing: 0" aria-label="Detailed and/or summarized report">
<thead>
<tr>
<th class="c header" style="background-color: #111853; color: #ffffff" scope="col">Sem.</th>
<th class="c header" style="background-color: #111853; color: #ffffff" scope="col">Loopbaan</th>
<th class="c header" style="background-color: #111853; color: #ffffff" scope="col">Studiegidsnummer</th>
<th class="c header" style="background-color: #111853; color: #ffffff" scope="col">Vaknaam</th>
<th class="c header" style="background-color: #111853; color: #ffffff" scope="col">Onderd.</th>
<th class="c header" style="background-color: #111853; color: #ffffff" scope="col">Instituut</th>
<th class="c header" style="background-color: #111853; color: #ffffff" scope="col">Actnr.</th>
<th class="c header" style="background-color: #111853; color: #ffffff" scope="col">Begindatum</th>
<th class="c header" style="background-color: #111853; color: #ffffff" scope="col">Einddatum</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Informatica</td>
<td>INF001</td>
<td>Programmeren 1</td>
<td>Programmeren</td>
<td>Natuurwetenschappen</td>
<td>0012345678</td>
<td>01-09-2022</td>
<td>31-12-2022</td>
</tr>
<tr>
<td>1</td>
<td>Informatica</td>
<td>INF002</td>
<td>Programmeren 2</td>
<td>Programmeren</td>
<td>Natuurwetenschappen</td>
<td>0012345678</td>
<td>01-09-2022</td>
<td>31-12-2022</td>
</tr>
<tr>
<td>1</td>
<td>Informatica</td>
<td>INF003</td>
<td>Programmeren 3</td>
<td>Programmeren</td>
<td>Natuurwetenschappen</td>
<td>0012345678</td>
<td>01-09-2022</td>
<td>31-12-2022</td>
</tr>
</tbody>
</table>
<script>
function myFunction() {
var input, filter, table, tr, th, thead, td, i, j, txtValue;
input = document.getElementById("JBput");
filter = input.value.toUpperCase();
table = document.getElementById("JBtable");
tr = table.getElementsByTagName("tr");
thead = table.getElementsByTagName("thead")[0];
th = thead.getElementsByTagName("th");
for (i = 1; i < tr.length; i++) {
var matchFound = false;
for (j = 0; j < tr[i].cells.length; j++) {
td = tr[i].getElementsByTagName("td")[j];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
matchFound = true;
break;
}
}
}
if (matchFound) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
function sortTable(n) {
var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
table = document.getElementById("JBtable");
switching = true;
dir = "asc";
while (switching) {
switching = false;
rows = table.rows;
for (i = 1; i < (rows.length - 1); i++) {
shouldSwitch = false;
x = rows[i].getElementsByTagName("TD")[n];
y = rows[i + 1].getElementsByTagName("TD")[n];
if (dir == "asc") {
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
shouldSwitch = true;
break;
}
} else if (dir == "desc") {
if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
shouldSwitch = true;
break;
}
}
}
if (shouldSwitch) {
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
switching = true;
switchcount++;
} else {
if (switchcount == 0 && dir == "asc") {
dir = "desc";
switching = true;
}
}
}
}
</script>
</div></div></div></div>
</body>
</html>Editor is loading...