Membuat Paging Manual Menggunakan Javascript

Paging atau paginasi adalah teknik yang sering digunakan untuk memecah data yang besar menjadi beberapa halaman yang lebih mudah dikelola dan dibaca. Membuat paging ada banyak caranya, mau yang sat set bisa pakai plugin pagination.js, twbs-pagination.js dan masih banyak plugin lainnya. Tapi kali ini, saya akan memberikan tutorial bagaimana cara membuat paging secara manual menggunakan JavaScript.

Daftar Isi

Langkah-langkah Membuat Paging Manual
Kesimpulan

Langkah-langkah Membuat Paging Manual

Berikut adalah langkah-langkah untuk membuat paging manual menggunakan JavaScript.

1. Persiapan Data

Pertama, kita perlu menyiapkan data yang akan ditampilkan. Agar tidak ribet kita bisa menggunakan API link berikut untuk mendapatkan list datanya: https://dummyjson.com/products?limit=10&skip=0&select=title,price,thumbnail . Result Data JSON yang dihasilkannya seperti di bawah ini:

{
  "products": [
    {
      "id": 1,
      "title": "Essence Mascara Lash Princess",
      "price": 9.99,
      "thumbnail": "https://cdn.dummyjson.com/products/images/beauty/Essence%20Mascara%20Lash%20Princess/thumbnail.png"
    },
    {
      "id": 2,
      "title": "Eyeshadow Palette with Mirror",
      "price": 19.99,
      "thumbnail": "https://cdn.dummyjson.com/products/images/beauty/Eyeshadow%20Palette%20with%20Mirror/thumbnail.png"
    },
    {
      "id": 3,
      "title": "Powder Canister",
      "price": 14.99,
      "thumbnail": "https://cdn.dummyjson.com/products/images/beauty/Powder%20Canister/thumbnail.png"
    },
    {
      "id": 4,
      "title": "Red Lipstick",
      "price": 12.99,
      "thumbnail": "https://cdn.dummyjson.com/products/images/beauty/Red%20Lipstick/thumbnail.png"
    },
    {
      "id": 5,
      "title": "Red Nail Polish",
      "price": 8.99,
      "thumbnail": "https://cdn.dummyjson.com/products/images/beauty/Red%20Nail%20Polish/thumbnail.png"
    },
    {
      "id": 6,
      "title": "Calvin Klein CK One",
      "price": 49.99,
      "thumbnail": "https://cdn.dummyjson.com/products/images/fragrances/Calvin%20Klein%20CK%20One/thumbnail.png"
    },
    {
      "id": 7,
      "title": "Chanel Coco Noir Eau De",
      "price": 129.99,
      "thumbnail": "https://cdn.dummyjson.com/products/images/fragrances/Chanel%20Coco%20Noir%20Eau%20De/thumbnail.png"
    },
    {
      "id": 8,
      "title": "Dior J'adore",
      "price": 89.99,
      "thumbnail": "https://cdn.dummyjson.com/products/images/fragrances/Dior%20J'adore/thumbnail.png"
    },
    {
      "id": 9,
      "title": "Dolce Shine Eau de",
      "price": 69.99,
      "thumbnail": "https://cdn.dummyjson.com/products/images/fragrances/Dolce%20Shine%20Eau%20de/thumbnail.png"
    },
    {
      "id": 10,
      "title": "Gucci Bloom Eau de",
      "price": 79.99,
      "thumbnail": "https://cdn.dummyjson.com/products/images/fragrances/Gucci%20Bloom%20Eau%20de/thumbnail.png"
    }
  ],
  "total": 194,
  "skip": 0,
  "limit": 10
}

Karena dari datanya tidak dikasih total page, dan current page berapa nanti kita bisa akali sendiri. Menggunakan data skip dan limitnya.

2. Membuat Function Pagination

Selanjutnya, kita membuat function untuk pagination.

function pagination(current_page, last_page, onSides = 1) {
    // pages
    let pages = [];
    // Loop through
    for (let i = 1; i <= last_page; i++) {
        // Define offset
        let offset = (i == 1 || last_page) ? onSides + 1 : onSides;
        // If added
        if (i == 1 || (current_page - offset <= i && current_page + offset >= i) || 
            i == current_page || i == last_page) {
            pages.push(i);
        } else if (i == current_page - (offset + 1) || i == current_page + (offset + 1)) {
            pages.push('...');
        }
    }
    return pages;
}

3. Buat Fungsi untuk Menampilkan Data

Kita buat fungsi untuk menampilkan data sesuai halaman yang dipilih. Agar coding lebih cepat kita bisa menggunakan plugin jquery yang nantinya kita sisipkan di header.

function displayData(pageNumber){
  let limit = 8;
  var skip = (pageNumber-1)*limit;
  $.ajax({url: `https://dummyjson.com/products?limit=${limit}&skip=${skip}&select=title,price,thumbnail`, success: function(result){
    $(`#displayData`).empty();
    $.each(result.products, function(index, item) {
        $(`#displayData`).append(`<div class="col-lg-3 card">
                                    <img src="${item.thumbnail}" width="100%" alt="">
                                    <div>
                                        <h3 class="title">${item.title} (ID: ${item.id})</h3>
                                        <p class="desc">${item.price}</p>
                                    </div>
                                </div>`);
    });

    var totalPage = Math.ceil(result.total/limit);
    displayPaging(pageNumber,totalPage);
  }});
  $('html, body').animate({
      scrollTop: $("#displayData").offset().top
  }, 500);
}

4. Buat Fungsi untuk Membuat Navigasi Paging

Selanjutnya, kita buat fungsi untuk menampilkan navigasi paging.

 function displayPaging(pageNumber, totalPage){
  var paging = pages(pageNumber,totalPage);
  $(`#paging`).empty();
  $.each(paging, function(index, item) {
      if(Number.isInteger(item)){
          if(item==pageNumber){
              $(`#paging`).append(`<li class="page-item active"><span class="page-link">${item}</span></li>`);
          }else{
              $(`#paging`).append(`<li onclick="displayData(${item})" class="page-item"><a class="page-link" href="javascript:;">${item}</a></li>`);
          }
      }else{
          $(`#paging`).append(`<li class="page-item"><span class="page-link">${item}</span></li>`);
      }
  });
}

5. Tambahkan HTML untuk Display data dan Paging

Terakhir, kita tambahkan HTML sederhana untuk navigasi paging. Untuk CSSnya saya menggunakan framework bootstrap untuk mempercepat styling.

<div class="container">
  <div id="displayData" class="row">
  </div>
  <nav aria-label="Page navigation example">
      <ul id="paging" class="pagination d-flex justify-content-center mt-4">
      </ul>
  </nav>
</div>

6. Full Code + Pemanggilan Function Utama

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css" integrity="sha512-jnSuA4Ss2PkkikSOLtYs8BlYIeeIK1h99ty4YfvRPAlzr377vr3CXDb7sb7eEEBYjDtcYj+AjBH3FLv5uSJuXg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
    <div class="container">
        <div id="displayData" class="row">
        </div>
        <nav aria-label="Page navigation example">
            <ul id="paging" class="pagination d-flex justify-content-center mt-4">
            </ul>
        </nav>
    </div>
    <script>
    displayData(1);

    function displayData(pageNumber){
        let limit = 8;
        var skip = (pageNumber-1)*limit;
        $.ajax({url: `https://dummyjson.com/products?limit=${limit}&skip=${skip}&select=title,price,thumbnail`, success: function(result){
            $(`#displayData`).empty();
            
            $.each(result.products, function(index, item) {
                $(`#displayData`).append(`<div class="col-lg-3 card">
                                            <img src="${item.thumbnail}" width="100%" alt="">
                                            <div>
                                                <h3 class="title">${item.title} (ID: ${item.id})</h3>
                                                <p class="desc">${item.price}</p>
                                            </div>
                                        </div>`);
            });

            var totalPage = Math.ceil(result.total/limit);
            displayPaging(pageNumber,totalPage);
        }});
        $('html, body').animate({
            scrollTop: $("#displayData").offset().top
        }, 500);
    }

    function displayPaging(pageNumber, totalPage){
        var paging = pages(pageNumber,totalPage);
        $(`#paging`).empty();
        $.each(paging, function(index, item) {
            if(Number.isInteger(item)){
                if(item==pageNumber){
                    $(`#paging`).append(`<li class="page-item active"><span class="page-link">${item}</span></li>`);
                }else{
                    $(`#paging`).append(`<li onclick="displayData(${item})" class="page-item"><a class="page-link" href="javascript:;">${item}</a></li>`);
                }
            }else{
                $(`#paging`).append(`<li class="page-item"><span class="page-link">${item}</span></li>`);
            }
        });
    }

    function pages(current_page, last_page, onSides = 0) {
        // pages
        let pages = [];
        // Loop through
        for (let i = 1; i <= last_page; i++) {
            // Define offset
            let offset = (i == 1 || last_page) ? onSides + 1 : onSides;
            // If added
            if (i == 1 || (current_page - offset <= i && current_page + offset >= i) || 
                i == current_page || i == last_page) {
                pages.push(i);
            } else if (i == current_page - (offset + 1) || i == current_page + (offset + 1)) {
                pages.push('...');
            }
        }
        return pages;
    }
    </script>
</body>
</html>

Demo: Cek Disini

Kesimpulan

Membuat paging manual menggunakan JavaScript tidaklah sulit. Dengan mengikuti langkah-langkah di atas, kamu dapat dengan mudah membagi data besar menjadi beberapa halaman yang lebih mudah dibaca. Metode ini sangat bermanfaat untuk meningkatkan pengalaman pengguna saat berinteraksi dengan aplikasi atau situs web kamu. Agar tampilan menu dan pagingnya lebih menarik kamu bisa berinovasi dengan css sesuai selera kamu. Selamat mencoba!