Skip to content

Instantly share code, notes, and snippets.

@Samuelpasaribu
Created May 4, 2023 02:15
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Embed
What would you like to do?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tabel Dinamis dengan Navigasi Menggunakan JavaScript</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
h1 {
text-align: center;
margin-bottom: 30px;
}
.search-container {
display: flex;
justify-content: center;
margin-bottom: 20px;
}
.search-input {
width: 300px;
padding: 10px;
font-size: 14px;
}
#table-container {
max-width: 800px;
margin: 0 auto;
}
#table-container table {
width: 100%;
border-collapse: collapse;
}
#table-container th,
#table-container td {
padding: 8px;
border: 1px solid #ccc;
text-align: left;
}
#table-container th {
background-color: #f2f2f2;
}
#page-info {
margin-top: 10px;
}
@media (max-width: 600px) {
.search-container {
flex-direction: column;
}
.search-input {
width: 100%;
margin-bottom: 10px;
}
}
</style>
</head>
<body>
<h1>Tabel Dinamis dengan Navigasi Menggunakan JavaScript</h1>
<div class="search-container">
<input type="text" id="search-input" class="search-input" placeholder="Cari berdasarkan nama, usia, atau alamat">
</div>
<div id="table-container">
<table>
<thead>
<tr>
<th>Nama</th>
<th>Usia</th>
<th>Alamat</th>
</tr>
</thead>
<tbody id="table-body"></tbody>
</table>
<div id="page-info"></div>
</div>
<script>
const data = [{
nama: "John Doe",
usia: 25,
alamat: "Jakarta"
},
{
nama: "Jane Smith",
usia: 30,
alamat: "Surabaya"
},
{
nama: "David Johnson",
usia: 35,
alamat: "Bandung"
},
{
nama: "Emily Davis",
usia: 28,
alamat: "Medan"
},
{
nama: "Michael Wilson",
usia: 32,
alamat: "Yogyakarta"
},
];
const searchInput = document.getElementById("search-input");
searchInput.addEventListener("input", handleSearch);
renderTable(data);
function renderTable(data) {
const tableBody = document.getElementById("table-body");
tableBody.innerHTML = "";
data.forEach(item => {
const row = document.createElement("tr");
const namaCell = document.createElement("td");
namaCell.textContent = item.nama;
row.appendChild(namaCell);
const usiaCell = document.createElement("td");
usiaCell.textContent = item.usia;
row.appendChild(usiaCell);
const alamatCell = document.createElement("td");
alamatCell.textContent = item.alamat;
row.appendChild(alamatCell);
tableBody.appendChild(row);
});
}
function handleSearch() {
const searchText = searchInput.value.toLowerCase();
const filteredData = data.filter(item => {
return (
item.nama.toLowerCase().includes(searchText) ||
item.usia.toString().includes(searchText) ||
item.alamat.toLowerCase().includes(searchText)
);
});
renderTable(filteredData);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment