ajarkan saya membuat pagination berikan contoh dalam bentuk html dan js

Berikut adalah contoh kode HTML dan JavaScript untuk membuat pagination:

HTML:

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

JavaScript:

var currentPage = 1;
var itemsPerPage = 5;
var data = [
  "Data 1",
  "Data 2",
  "Data 3",
  "Data 4",
  "Data 5",
  "Data 6",
  "Data 7",
  "Data 8",
  "Data 9",
  "Data 10",
  "Data 11",
  "Data 12",
  "Data 13",
  "Data 14",
  "Data 15",
];

function displayData(page) {
  var startIndex = (page - 1) * itemsPerPage;
  var endIndex = startIndex + itemsPerPage;
  var dataToShow = data.slice(startIndex, endIndex);

  var dataElement = document.getElementById("data");
  dataElement.innerHTML = "";
  for (var i = 0; i < dataToShow.length; i++) {
    var li = document.createElement("li");
    li.textContent = dataToShow[i];
    dataElement.appendChild(li);
  }
}

function displayPagination() {
  var totalPages = Math.ceil(data.length / itemsPerPage);

  var paginationElement = document.getElementById("pagination");
  paginationElement.innerHTML = "";

  for (var i = 1; i <= totalPages; i++) {
    var button = document.createElement("button");
    button.textContent = i;
    button.addEventListener("click", function (event) {
      currentPage = parseInt(event.target.textContent);
      displayData(currentPage);
      displayPagination();
    });

    paginationElement.appendChild(button);
  }
}

displayData(currentPage);
displayPagination();

Penjelasan:

• Variabel currentPage digunakan untuk melacak halaman saat ini yang sedang ditampilkan.
• Variabel itemsPerPage digunakan untuk menentukan jumlah item data yang ditampilkan per halaman.
• Variabel data berisi data yang akan ditampilkan.
• Fungsi displayData(page) digunakan untuk menampilkan data sesuai dengan halaman yang diberikan.
• 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.
• Pemanggilan fungsi displayData(currentPage) dan displayPagination() awal akan menampilkan halaman dan tombol paginasi pertama.

Anda dapat memodifikasi kode ini sesuai dengan kebutuhan Anda