Cara Membuat Tabel Dinamis dengan Tombol Navigasi Menggunakan JavaScript

const prevButton = document.querySelector('.prev');
const nextButton = document.querySelector('.next');
	let currentPage = 1;
	const scriptsPerPage = 10;
	const scripts = ['scdeface-1', 'scdeface-2', 'scdeface-3', 'scdeface-4', 'scdeface-5', 'scdeface-6', 'scdeface-7', 'scdeface-8', 'scdeface-9', 'scdeface-10', 'scdeface-11', 'scdeface-12', 'scdeface-13', 'scdeface-14', 'scdeface-15', 'scdeface-16', 'scdeface-17', 'scdeface-18', 'scdeface-19', 'scdeface-20'];

	function displayScripts(start, end) {
		const table = document.querySelector('table tbody');
		table.innerHTML = '';
		for (let i = start; i < end; i++) {
			const script = scripts[i];
			const row = `<tr><td>${i+1}</td><td>${script}</td><td>anonymous</td><td>2021-01-01</td></tr>`;
			table.insertAdjacentHTML('beforeend', row);
		}
	}

	function updatePagination() {
		if (currentPage === 1) {
			prevButton.classList.add('disabled');
		} else {
			prevButton.classList.remove('disabled');
		}
		if (currentPage === Math.ceil(scripts.length / scriptsPerPage)) {
			nextButton.classList.add('disabled');
		} else {
			nextButton.classList.remove('disabled');
		}
	}

	displayScripts(0, scriptsPerPage);
	updatePagination();

	prevButton.addEventListener('click', () => {
		if (currentPage > 1) {
			currentPage--;
			const start = (currentPage - 1) * scriptsPerPage;
			const end = start + scriptsPerPage;
			displayScripts(start, end);
			updatePagination();
		}
	});

	nextButton.addEventListener('click', () => {
		if (currentPage < Math.ceil(scripts.length / scriptsPerPage)) {
			currentPage++;
			const start = (currentPage - 1) * scriptsPerPage;
			const end = start + scriptsPerPage;
			displayScripts(start, end);
			updatePagination();
		}
	});

• Variabel prevButton dan nextButton mendapatkan elemen HTML tombol navigasi dari HTML.
• Variabel currentPage digunakan untuk menunjukkan halaman saat ini.
• Variabel scriptsPerPage digunakan untuk menunjukkan jumlah skrip yang akan ditampilkan dalam satu halaman.
• Variabel scripts adalah daftar skrip deface palsu yang akan ditampilkan di tabel.
• Fungsi displayScripts(start, end) mengambil dua argumen: start dan end. Ini mengambil skrip dari scripts dari indeks start hingga indeks end dan menambahkannya ke dalam tabel.
• Fungsi updatePagination() memeriksa apakah pengguna berada di halaman pertama atau terakhir dan menentukan apakah tombol "Prev" atau "Next" harus dinonaktifkan. Ini juga memanggil fungsi displayScripts() untuk menampilkan skrip yang sesuai pada halaman saat ini.