Cara Membuat Pagination dengan HTML dan JavaScript - Tutorial Lengkap

"Berikut adalah contoh kode HTML dan JavaScript untuk membuat pagination:\n\nHTML:\nhtml\n<div id=\"pagination\"></div>\n<ul id=\"data\"></ul>\n\n\nJavaScript:\njavascript\nvar currentPage = 1;\nvar itemsPerPage = 5;\nvar data = [\n \"Data 1\",\n \"Data 2\",\n \"Data 3\",\n \"Data 4\",\n \"Data 5\",\n \"Data 6\",\n \"Data 7\",\n \"Data 8\",\n \"Data 9\",\n \"Data 10\",\n \"Data 11\",\n \"Data 12\",\n \"Data 13\",\n \"Data 14\",\n \"Data 15\",\n];\n\nfunction displayData(page) {\n var startIndex = (page - 1) * itemsPerPage;\n var endIndex = startIndex + itemsPerPage;\n var dataToShow = data.slice(startIndex, endIndex);\n\n var dataElement = document.getElementById(\"data\");\n dataElement.innerHTML = \"\";\n for (var i = 0; i < dataToShow.length; i++) {\n var li = document.createElement(\"li\");\n li.textContent = dataToShow[i];\n dataElement.appendChild(li);\n }\n}\n\nfunction displayPagination() {\n var totalPages = Math.ceil(data.length / itemsPerPage);\n\n var paginationElement = document.getElementById(\"pagination\");\n paginationElement.innerHTML = \"\";\n\n for (var i = 1; i <= totalPages; i++) {\n var button = document.createElement(\"button\");\n button.textContent = i;\n button.addEventListener(\"click\", function (event) {\n currentPage = parseInt(event.target.textContent);\n displayData(currentPage);\n displayPagination();\n });\n\n paginationElement.appendChild(button);\n }\n}\n\ndisplayData(currentPage);\ndisplayPagination();\n\n\nPenjelasan:\n- Variabel currentPage digunakan untuk melacak halaman saat ini yang sedang ditampilkan.\n- Variabel itemsPerPage digunakan untuk menentukan jumlah item data yang ditampilkan per halaman.\n- Variabel data berisi data yang akan ditampilkan.\n- Fungsi displayData(page) digunakan untuk menampilkan data sesuai dengan halaman yang diberikan.\n- Fungsi displayPagination() digunakan untuk menampilkan tombol paginasi sesuai dengan jumlah halaman yang ada. Setiap tombol akan memanggil fungsi displayData() dengan halaman yang sesuai saat diklik.\n- Pemanggilan fungsi displayData(currentPage) dan displayPagination() awal akan menampilkan halaman dan tombol paginasi pertama.\n\nAnda dapat memodifikasi kode ini sesuai dengan kebutuhan Anda.\n