CRUD JavaScript dengan Pencarian, Sorting, dan Pagination

Dalam tutorial sebelumnya sudah dijelaskan mengenai CRUD Fetch API dan CRUD Tanpa API di JavaScript. Dan dalam tutorial kali ini kita akan bahas tentang CRUD JavaScript dengan Pencarian, Sorting, dan Pagination. Karena setelah dapat membuat aplikasi CRUD dasar, tantangan berikutnya adalah mengelola banyak data agar pengguna bisa:

• Mencari data dengan cepat

• Mengurutkan berdasarkan kolom tertentu

• Membagi halaman (pagination) agar tampilan tetap ringan

Ketiga fitur ini membuat aplikasi kamu terasa seperti dashboard profesional, mirip dengan sistem manajemen data di admin panel modern.

Struktur HTML

Gunakan struktur dasar berikut untuk tabel data dan area kontrol:

<h2>Manajemen Produk</h2>

<input type="text" id="search" placeholder="Cari produk...">

<table border="1" cellpadding="8">
  <thead>
    <tr>
      <th onclick="sortTable('name')">Nama Produk ⬍</th>
      <th onclick="sortTable('price')">Harga ⬍</th>
    </tr>
  </thead>
  <tbody id="tableBody"></tbody>
</table>

<div id="pagination"></div>

<script src="app.js"></script>

Data dan Variabel Dasar

Buat file app.js dan siapkan data dummy (bisa juga dari LocalStorage):

let products = [
  { name: "Kopi Arabica", price: 45000 },
  { name: "Teh Hijau", price: 30000 },
  { name: "Coklat Bubuk", price: 50000 },
  { name: "Kopi Robusta", price: 40000 },
  { name: "Gula Aren", price: 20000 },
  { name: "Susu Kental Manis", price: 25000 },
  { name: "Krimer", price: 27000 },
  { name: "Kopi Latte", price: 55000 },
  { name: "Matcha", price: 60000 },
  { name: "Cappuccino", price: 52000 }
];

let currentPage = 1;
const itemsPerPage = 4;
let sortDirection = true;

Menampilkan Data ke Tabel (Read + Pagination)

function renderTable(data) {
  const tableBody = document.getElementById("tableBody");
  tableBody.innerHTML = "";

  // Hitung index data untuk pagination
  const start = (currentPage - 1) * itemsPerPage;
  const end = start + itemsPerPage;
  const paginatedData = data.slice(start, end);

  paginatedData.forEach((p, i) => {
    const row = document.createElement("tr");
    row.innerHTML = `
      <td>${p.name}</td>
      <td>Rp ${p.price.toLocaleString()}</td>
    `;
    tableBody.appendChild(row);
  });

  renderPagination(data.length);
}

Fitur Pagination

Tambahkan fungsi untuk menampilkan tombol halaman:

function renderPagination(totalItems) {
  const pagination = document.getElementById("pagination");
  pagination.innerHTML = "";

  const totalPages = Math.ceil(totalItems / itemsPerPage);

  for (let i = 1; i <= totalPages; i++) {
    const btn = document.createElement("button");
    btn.textContent = i;
    btn.className = (i === currentPage) ? "active" : "";
    btn.onclick = () => {
      currentPage = i;
      renderTable(filteredProducts);
    };
    pagination.appendChild(btn);
  }
}

Hasilnya: tombol 1, 2, 3… akan muncul otomatis berdasarkan jumlah data.

Fitur Pencarian Data

Tambahkan input pencarian agar pengguna bisa mencari produk berdasarkan nama.

const searchInput = document.getElementById("search");
let filteredProducts = [...products];

searchInput.addEventListener("input", () => {
  const keyword = searchInput.value.toLowerCase();
  filteredProducts = products.filter(p =>
    p.name.toLowerCase().includes(keyword)
  );
  currentPage = 1;
  renderTable(filteredProducts);
});

Cara kerja:

• Ketika pengguna mengetik di input “Cari produk…”

• Sistem akan memfilter data products

• Hanya data yang cocok dengan kata kunci yang ditampilkan

Fitur Sorting (Urutkan Data)

Kamu bisa mengurutkan data berdasarkan kolom “Nama Produk” atau “Harga”:

function sortTable(key) {
  filteredProducts.sort((a, b) => {
    if (typeof a[key] === "string") {
      return sortDirection
        ? a[key].localeCompare(b[key])
        : b[key].localeCompare(a[key]);
    } else {
      return sortDirection ? a[key] - b[key] : b[key] - a[key];
    }
  });

  sortDirection = !sortDirection;
  renderTable(filteredProducts);
}

Penjelasan:

• sortDirection menentukan apakah urut naik atau turun.

• Fungsi localeCompare() digunakan untuk mengurutkan string (teks).

• Klik header tabel untuk berganti arah sorting.

Styling Tambahan (Opsional)

Tambahkan sedikit CSS agar tabel terlihat profesional:

<style>
body {
  font-family: Arial, sans-serif;
  max-width: 600px;
  margin: 40px auto;
}

#search {
  width: 100%;
  padding: 8px;
  margin-bottom: 15px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th {
  background: #f4f4f4;
  cursor: pointer;
}

th, td {
  padding: 10px;
  border: 1px solid #ddd;
}

button {
  margin: 5px;
  padding: 5px 10px;
  cursor: pointer;
}

button.active {
  background: #007bff;
  color: white;
  border: none;
}
</style>

Hasil Akhir

Aplikasi sekarang bisa:

• Menampilkan data produk dengan tabel rapi

• Menyaring hasil lewat kolom pencarian

• Mengurutkan data naik/turun dengan klik header

• Menampilkan data berdasarkan halaman (pagination)

Pengembangan Lanjutan

Kamu bisa mengembangkan fitur ini menjadi aplikasi yang lebih kompleks:

• Tambahkan form CRUD seperti di tutorial sebelumnya

• Gunakan LocalStorage agar data tersimpan permanen

• Tambahkan tombol ekspor ke CSV / Excel

• Tambahkan indikator sort (▲▼) di header tabel

Kesimpulan

Dengan JavaScript murni (tanpa library), kamu bisa membuat CRUD lengkap dengan pencarian, sorting, dan pagination. Konsep ini penting untuk:

• Dashboard admin

• Sistem katalog produk

• Aplikasi data sederhana

Kunci utamanya: manipulasi array JavaScript dan DOM dinamis.