Panduan Pengurutan JavaScript: Array, Tabel, dan Seret & Lepas dengan SortableJS

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Pendahuluan

Fungsi pengurutan berbasis JavaScript sangat berguna untuk mengelola data secara dinamis dalam tabel dan daftar.
Dalam artikel ini, kami menjelaskan secara komprehensif segala hal mulai dari fitur pengurutan native JavaScript hingga implementasi pengurutan drag-and-drop yang intuitif.

Dengan membaca artikel ini, Anda akan dapat:

• Memahami cara mengurutkan array menggunakan fitur standar JavaScript.
• Menerapkan fungsi pengurutan untuk tabel HTML dan daftar.
• Menerapkan pengurutan drag-and-drop menggunakan SortableJS.
• Mendapatkan keterampilan praktis yang dapat diterapkan pada proyek dunia nyata melalui contoh dan kasus penggunaan.

Kami akan membahas setiap topik langkah demi langkah, jadi pastikan untuk mengikuti dan mencoba mengimplementasikan contoh-contohnya sendiri.

2. Memahami Fitur Pengurutan Native JavaScript

2.1 Metode Pengurutan Dasar

Di JavaScript, Anda dapat dengan mudah mengurutkan data array menggunakan fungsi pengurutan bawaan.
Bagian ini menjelaskan segala hal mulai dari penggunaan dasar hingga contoh lanjutan, lengkap dengan contoh kode.

Contoh Pengurutan String

const fruits = ["banana", "apple", "orange", "grape"];
fruits.sort();
console.log(fruits); 
// Output: ["apple", "banana", "grape", "orange"]

Contoh Pengurutan Numerik

const numbers = [40, 100, 1, 5, 25, 10];
numbers.sort((a, b) => a - b); // Ascending order
console.log(numbers); 
// Output: [1, 5, 10, 25, 40, 100]

Saat mengurutkan angka, penting untuk menggunakan fungsi perbandingan.
Tanpa fungsi tersebut, nilai akan diurutkan secara leksikografis (sebagai string), yang dapat menghasilkan hasil yang tidak terduga.

2.2 Contoh Lanjutan Menggunakan Fungsi Perbandingan Kustom

Saat mengurutkan array objek, Anda dapat mengurutkan berdasarkan properti tertentu.

Contoh Pengurutan Array Objek

const users = [
  { name: "Yamada", age: 30 },
  { name: "Tanaka", age: 25 },
  { name: "Suzuki", age: 35 }
];

// Sort by age
users.sort((a, b) => a.age - b.age);
console.log(users);
/* Output:
[
  { name: "Tanaka", age: 25 },
  { name: "Yamada", age: 30 },
  { name: "Suzuki", age: 35 }
]
*/

Seperti yang ditunjukkan di atas, menggunakan fungsi perbandingan memungkinkan Anda menerapkan logika pengurutan yang sangat disesuaikan.

2.3 Tips Optimasi Kinerja

Saat bekerja dengan dataset besar, pertimbangkan poin-poin berikut:

1. Optimalkan fungsi perbandingan

• Hindari perhitungan berat di dalam fungsi perbandingan.

1. Kurangi jumlah data yang diurutkan

• Saring data yang tidak diperlukan sebelum melakukan pengurutan.

1. Gunakan Web Workers

• Jalankan operasi pengurutan di latar belakang untuk meningkatkan kinerja secara keseluruhan.

3. Contoh Implementasi: Mengurutkan Tabel HTML

3.1 Fungsi Pengurutan Tabel Dasar

Di sini, kami akan mengimplementasikan fitur dalam JavaScript yang mengurutkan data tabel HTML dengan mengklik header kolom.

Kode HTML

<table id="data-table">
  <thead>
    <tr>
      <th onclick="sortTable(0)">Name</th>
      <th onclick="sortTable(1)">Age</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Yamada</td><td>30</td></tr>
    <tr><td>Tanaka</td><td>25</td></tr>
    <tr><td>Suzuki</td><td>35</td></tr>
  </tbody>
</table>

Kode JavaScript

function sortTable(columnIndex) {
  const table = document.getElementById("data-table");
  const rows = Array.from(table.rows).slice(1); // Exclude the header row

  rows.sort((rowA, rowB) => {
    const cellA = rowA.cells[columnIndex].innerText;
    const cellB = rowB.cells[columnIndex].innerText;

    // Detect whether values are numeric or strings, then sort accordingly
    return isNaN(cellA) || isNaN(cellB)
      ? cellA.localeCompare(cellB)
      : cellA - cellB;
  });

  // Re-render after sorting
  rows.forEach(row => table.tBodies[0].appendChild(row));
}

Ini adalah implementasi sederhana yang memungkinkan Anda mengurutkan setiap kolom hanya dengan mengklik.

3.2 Contoh Lanjutan yang Digabungkan dengan Penyaringan

Dengan menggabungkan pengurutan dengan penyaringan, Anda juga dapat mengurutkan hasil pencarian secara real time.

Contoh Kode JavaScript

document.getElementById("filter-input").addEventListener("input", (e) => {
  const filter = e.target.value.toLowerCase();
  const rows = document.querySelectorAll("#data-table tbody tr");

  rows.forEach(row => {
    const text = row.innerText.toLowerCase();
    row.style.display = text.includes(filter) ? "" : "none";
  });
});

Ini memungkinkan fitur di mana pengguna dapat mencari dan mengurutkan data secara bersamaan.

4. Pengurutan Seret-dan-Jatuhkan dengan SortableJS

4.1 Apa Itu SortableJS?

SortableJS adalah perpustakaan JavaScript yang memudahkan penerapan pengurutan seret-dan-jatuhkan untuk elemen HTML.
Perpustakaan ini memiliki fitur-fitur berikut:

• Interaksi seret-dan-jatuhkan yang intuitif .
• Sangat dapat disesuaikan, dan dapat diterapkan pada daftar serta tabel.
• Ramah seluler, mendukung operasi berbasis sentuhan.
• Ringan tanpa ketergantungan, memberikan kinerja yang luar biasa.

4.2 Instalasi dan Penyiapan Dasar untuk SortableJS

4.2.1 Langkah-Langkah Instalasi

Menggunakan CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.14.0/Sortable.min.js"></script>

Menggunakan npm (untuk lingkungan Node.js)

npm install sortablejs

4.2.2 Konfigurasi Dasar

Dengan menggunakan kode HTML dan JavaScript berikut, Anda dapat menerapkan pengurutan seret-dan-jatuhkan.

Kode HTML

<ul id="sortable-list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

Kode JavaScript

document.addEventListener("DOMContentLoaded", () => {
  const list = document.getElementById("sortable-list");
  new Sortable(list, {
    animation: 150, // Animation speed (milliseconds)
    ghostClass: "sortable-ghost" // Class applied to the element while dragging
  });
});

CSS (Opsional)

.sortable-ghost {
  opacity: 0.5;
  background: #f0f0f0;
}

4.3 Contoh Lanjutan: Seret-dan-Jatuhkan Antara Beberapa Daftar

Kode HTML

<div>
  <ul id="list1">
    <li>Item A</li>
    <li>Item B</li>
  </ul>
  <ul id="list2">
    <li>Item C</li>
    <li>Item D</li>
  </ul>
</div>

Kode JavaScript

document.addEventListener("DOMContentLoaded", () => {
  const list1 = document.getElementById("list1");
  const list2 = document.getElementById("list2");

  new Sortable(list1, {
    group: "shared", // Set the group name
    animation: 150
  });

  new Sortable(list2, {
    group: "shared", // Use the same group name
    animation: 150
  });
});

5. Tabel Perbandingan: Perpustakaan Pihak Ketiga vs Implementasi Native

5.1 Tabel Perbandingan

5.2 Kapan Implementasi Native Menjadi Pilihan Terbaik

Keuntungan

1. Tanpa ketergantungan, sehingga tidak memerlukan perpustakaan eksternal.
2. Cepat diimplementasikan dengan kode singkat, ideal untuk fitur pengurutan sederhana .
3. Kinerja tinggi, cocok bahkan untuk dataset yang besar.

Kerugian

• Tidak mendukung seret-dan-jatuhkan, memerlukan pekerjaan tambahan untuk interaksi visual.
• Kustomisasi lanjutan atau dukungan multi-daftar memerlukan implementasi atau perpustakaan tambahan .

Kasus Penggunaan

• Ketika Anda perlu mengurutkan tabel HTML statis atau array .
• Proyek yang mengutamakan kinerja dan fungsionalitas minimal.

5.3 Kapan SortableJS Menjadi Pilihan Terbaik

Keuntungan

1. Seret-dan-jatuhkan bawaan untuk interaksi visual yang intuitif.
2. Mendukung pergerakan multi-daftar dan sinkronisasi server .
3. Siap seluler secara default, termasuk dukungan sentuhan.
4. Sangat dapat disesuaikan dan cocok untuk lingkungan produksi.

Kerugian

• Memerlukan penambahan perpustakaan, sedikit menambah ukuran proyek.
• Kompleksitas kode dapat meningkat, menghasilkan biaya belajar yang lebih tinggi .
• Potensi masalah ketergantungan atau konfigurasi di lingkungan tertentu.

Kasus Penggunaan

• Ketika Anda memerlukan daftar dinamis atau fungsi seret-dan-jatuhkan .
• Desain UI yang memerlukan memindahkan item antara beberapa daftar atau menyimpan urutan secara real time .

6. Tips Implementasi dan Pemecahan Masalah

6.1 Optimisasi Kinerja

1. Menangani Set Data Besar

Menyortir dataset besar dapat menyebabkan penurunan kinerja.

Solusi

• Gunakan scrolling virtual

  const visibleItems = items.slice(startIndex, endIndex);
  renderItems(visibleItems);
  

• Manfaatkan pemrosesan asynchronous Jalankan logika penyortiran di Web Workers untuk menjaga UI tetap responsif.

2. Minimalkan Operasi DOM

Penyortiran sering melibatkan manipulasi DOM yang sering, sehingga mengurangi reflow yang tidak perlu sangat penting.

Solusi

• Gunakan DocumentFragment

  const fragment = document.createDocumentFragment();
  rows.forEach(row => fragment.appendChild(row));
  table.appendChild(fragment);
  

6.2 Meningkatkan Aksesibilitas dan Kegunaan

1. Dukungan Navigasi Keyboard

Sediakan alternatif keyboard bagi pengguna yang tidak dapat menggunakan drag-and-drop.

Solusi

document.addEventListener('keydown', (e) => {
  if (e.key === 'ArrowUp') {
    moveItemUp();
  } else if (e.key === 'ArrowDown') {
    moveItemDown();
  }
});

2. Peningkatan Umpan Balik Visual

Tambahkan petunjuk visual untuk secara jelas menunjukkan aksi penyortiran.

Contoh CSS

.sortable-ghost {
  opacity: 0.5;
  border: 2px dashed #007BFF;
}

6.3 Panduan Penanganan Kesalahan dan Debugging

1. Kesalahan: Penyortiran Tidak Berfungsi

Penyebab 1: Selector tidak tepat

const list = document.getElementById("sortable-list");
if (!list) {
  console.error("Element not found. Please check the ID.");
}

Penyebab 2: Konflik event

list.removeEventListener('click', handler);

6.4 Daftar Periksa Pemecahan Masalah

1. Periksa kesalahan JavaScript di konsol

• Gunakan tab Console pada developer tools untuk mengidentifikasi masalah.

1. Verifikasi format data

• Validasi struktur data yang digunakan dalam penyortiran dan komunikasi server.

1. Konfirmasi versi perpustakaan

• Pastikan semua perpustakaan dan dependensi terbaru.

7. Pertanyaan yang Sering Diajukan (FAQ)

Q1: Mengapa fitur penyortiran tabel tidak berfungsi?

A1: Silakan periksa poin-poin berikut.

1. Selector tidak tepat

   const table = document.getElementById("data-table");
   

2. Membedakan antara angka dan string

   rows.sort((a, b) => Number(a) - Number(b));
   

3. Konflik event Kode JavaScript atau plugin lain mungkin menempelkan event pada elemen yang sama.

Q2: Drag-and-drop tidak merespons. Apa yang harus saya lakukan?

A2: Periksa item-item berikut.

1. Pastikan SortableJS sudah dimuat

   console.log(Sortable);
   

2. Verifikasi struktur HTML

   <ul id="sortable-list">
     <li>Item 1</li>
   </ul>
   

3. Periksa pengaturan dukungan seluler

   new Sortable(list, {
     touchStartThreshold: 5
   });
   

4. Konfigurasi grup tidak tepat

   group: "shared"
   

Q3: Bagaimana cara menyimpan urutan yang disortir ke server?

A3: Sinkronisasi server dapat dengan mudah diimplementasikan menggunakan AJAX.

Contoh JavaScript

const list = document.getElementById("sortable-list");
new Sortable(list, {
  animation: 150,
  onEnd: function () {
    const items = Array.from(list.children).map(item => item.innerText);
    fetch("/save-order", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({ order: items })
    })
    .then(response => response.json())
    .then(data => console.log("Saved successfully:", data))
    .catch(error => console.error("Error:", error));
  }
});

Q4: Bagaimana saya dapat meningkatkan kinerja?

A4: Pertimbangkan pendekatan berikut.

1. Gunakan scrolling virtual

   const visibleItems = items.slice(startIndex, endIndex);
   renderItems(visibleItems);
   

2. Gunakan Web Workers Proses data di latar belakang untuk meningkatkan responsivitas UI.
3. Optimalkan logika penyortiran

   rows.sort((a, b) => a - b);
   

Q5: Dapatkah penyortiran digabungkan dengan fitur tambahan?

A5: Ya, dapat dengan mudah diperluas seperti ditunjukkan di bawah ini.

1. Gabungkan dengan penyaringan waktu nyata

   document.getElementById("search").addEventListener("input", (e) => {
     const value = e.target.value.toLowerCase();
     document.querySelectorAll("#sortable-list li").forEach(item => {
       item.style.display = item.innerText.toLowerCase().includes(value) ? "" : "none";
     });
   });
   

2. Tambah dan hapus item secara dinamis

   function addItem(text) {
     const list = document.getElementById("sortable-list");
     const li = document.createElement("li");
     li.textContent = text;
     list.appendChild(li);
   }
   
   function removeItem(index) {
     const list = document.getElementById("sortable-list");
     list.removeChild(list.children[index]);
   }
   

8. Kesimpulan

8.1 Ringkasan Artikel

1. Penyortiran Native JavaScript

• Mempelajari teknik penyortiran dasar menggunakan Array.prototype.sort() .
• Membahas penyortiran array objek dengan fungsi perbandingan dan strategi optimasi kinerja.

2. Penyortiran Tabel HTML

• Memperkenalkan contoh praktis untuk menyortir data tabel per kolom.
• Menjelajahi kasus penggunaan lanjutan yang digabungkan dengan fungsi penyaringan.

3. Drag-and-Drop dengan SortableJS

• Mengimplementasikan penyortiran drag-and-drop yang intuitif menggunakan SortableJS.
• Mempelajari pendekatan fleksibel termasuk pergerakan multi‑daftar dan sinkronisasi server.

4. Perbandingan Native vs SortableJS

• Membandingkan kelebihan dan kasus penggunaan untuk membantu memilih pendekatan terbaik bagi setiap proyek.

5. Pemecahan Masalah dan FAQ

• Menyediakan solusi untuk masalah umum dan tips untuk meningkatkan kinerja serta keandalan.

8.2 Langkah Praktis Selanjutnya

Fungsi penyortiran adalah komponen kunci untuk meningkatkan UI dinamis dan manajemen data.
Ingat poin-poin berikut saat Anda melanjutkan.

1. Mulailah dengan implementasi sederhana, kemudian jelajahi kasus penggunaan lanjutan
2. Bereksperimen dengan menyesuaikan kode
3. Kuasi teknik penanganan error dan debugging
4. Terus‑menerus meningkatkan kinerja dan kegunaan

8.3 Ambil Tindakan

1. Cobalah mengimplementasikannya sendiri!

• Terapkan contoh kode dari artikel ini ke proyek Anda sendiri dan uji secara praktik.
• Membagikan kode sumber Anda di GitHub dan bertukar masukan dengan pengembang lain juga disarankan.

2. Terus tingkatkan keterampilan Anda!

• Jika Anda ingin mempelajari lebih lanjut tentang fitur penyortiran, lihat sumber resmi berikut:
• SortableJS Official Documentation
• MDN Web Docs – Array.sort()

3. Periksa artikel terkait

• Kami juga merekomendasikan artikel tentang “Implementasi Penyaringan JavaScript” dan “Dasar‑dasar Manipulasi DOM” .

8.4 Pemikiran Akhir

Fungsi penyortiran penting untuk mengatur data dan meningkatkan pengalaman pengguna.
Gunakan teknik yang diperkenalkan dalam artikel ini untuk meningkatkan proyek Anda.

Jika Anda memiliki pertanyaan tentang mengimplementasikan fitur baru atau memperluas contoh ini,
jangan ragu menghubungi melalui bagian komentar atau formulir kontak.

Langkah selanjutnya ada di tangan Anda—mulailah bereksperimen dengan kode hari ini!