Untitled

mail@pastecode.io avatar
unknown
html
a year ago
4.6 kB
1
Indexable
Never
<!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>