Modul 8: Tabel Buah Pagination [5]

Roihan Fajareno Februari 17, 2024

Tujuan Program

Tujuan Program

Tujuan dari program ini hampir sama dengan Mini Project Table Buah Datastore Modul 8, perbedaannya ada pada penambahan fitur pagination. "Paging" atau "Pagination" adalah proses memisahkan konten ke dalam beberapa halaman terpisah untuk mempermudah navigasi dan mempercepat waktu muat. Pada program ini, pagination digunakan untuk membagi tabel data buah ke dalam beberapa halaman terpisah dengan jumlah item tertentu per halaman.

Tampilan awal program

Setelah diisi data

Data pada page berbeda


Source Code

Source code program ini bisa dilihat di Repository berikut: Source Code Mini Project
Github Repository: Main Repository

Kalian bisa mencoba program ini secara online dengan mengakses link berikut: Github Pages

  index.html 
<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Mini Project 5</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1>Tabel Buah (Pagination)</h1>
    
        <form onsubmit="return false;">
            <div>
                <label for="namaBuah">Nama Buah:</label>
                <input type="text" id="namaBuah" required>
            </div>
            <div>
                <label for="beratBuah">Berat:</label>
                <input type="number" id="beratBuah" min="0" required>
                <span>Kg</span>
            </div>
            <div>
                <label for="gambarBuah">Gambar:</label>
                <input type="text" id="gambarBuah">
            </div>
            <button onclick="addData(); renderData(tableDataStore);">Add</button>
        </form>
        <hr>
    
        <div id="pagination-container">
            <!-- Pagination -->
        </div>
    
        <table>
            <thead>
                <tr>
                    <th>No</th>
                    <th>Nama Buah</th>
                    <th>Berat</th>
                    <th>Gambar</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody id="tableBuah">
                <!-- Data Here -->
            </tbody>
        </table>
    
        <script src="script.js"></script>
    </body>
    </html>

  script.js 
    let namaBuahInput = document.getElementById("namaBuah");
    let beratBuahInput = document.getElementById("beratBuah");
    let gambarBuahInput = document.getElementById("gambarBuah");
    let tableBuah = document.getElementById("tableBuah");
    let paginationDiv = document.getElementById('pagination-container');
    
    // ------------------------------------------------------------------------- //
    
    let tableDataStore = [
        // Data Here
    ];
    
    // ------------------------------------------------------------------------- //
    
    let currentPage = 1;
    let maxRows = 5;
    
    function renderData(data) {
        tableBuah.innerHTML = "";
        let startIndex = (currentPage - 1) * maxRows;
        let endIndex = startIndex + maxRows;
        let extractedData = data.slice(startIndex, endIndex);
        tableBuah.appendChild(generateTable(extractedData));
    }
    
    function renderPagination(data) {
        paginationDiv.innerHTML = "";
        let totalPages = Math.ceil(data.length / maxRows);
        for (let i = 1; i <= totalPages; i++) {
            let pageLink = document.createElement('a');
            pageLink.textContent = i;
            pageLink.setAttribute("onclick", "setPage(this)");
            if (i === currentPage) {
                pageLink.classList.add('active');
            }
            paginationDiv.appendChild(pageLink);
        }
    }
    
    function setPage(anchorElement) {
        let pageLink = anchorElement;
        currentPage = Number(pageLink.textContent);
        renderAll(tableDataStore);
    }
    
    function generateTable(data) {
        let tableRows = document.createDocumentFragment();
    
        for (let i = 0; i < data.length; i++) {
            let tr = document.createElement('tr');
    
            let tdNomorUrut = document.createElement('td');
            let tdNama = document.createElement('td');
            let tdBerat = document.createElement('td');
            let tdGambar = document.createElement('td');
            let tdAction = document.createElement('td');
    
            tdNomorUrut.textContent = (currentPage - 1) * maxRows + i + 1;
            tdNama.textContent = data[i].nama;
            tdBerat.textContent = data[i].berat;
    
            let img = createImg(data[i].gambar);
            tdGambar.appendChild(img);
    
            let editButton = createButton("Edit", "editData(this)")
            tdAction.appendChild(editButton);
            
            let tdArray = [
                tdNomorUrut,
                tdNama,
                tdBerat, 
                tdGambar,
                tdAction
            ]
    
            tdArray.forEach(td => tr.appendChild(td));
    
            tableRows.appendChild(tr);
        }
        return tableRows;
    }
    
    function renderAll(data) {
        renderData(data);
        renderPagination(data);
    }
    
    renderAll(tableDataStore)
    
    // ------------------------------------------------------------------------- //
    
    function addData() {
        let newData = {
            nama: namaBuahInput.value, 
            berat: Number(beratBuahInput.value), 
            gambar: gambarBuahInput.value
        };
        tableDataStore.push(newData);
        renderAll(tableDataStore);
    }
    
    function editData(button) {
        let buttonRow = button.closest('tr');
        let position = Number(buttonRow.children[0].textContent);
        let index = position - 1;
    
        let nama = tableDataStore[index].nama;
        let berat = tableDataStore[index].berat;
        let gambar = tableDataStore[index].gambar;
    
        let tdElement = buttonRow.children;
        
        let namaInput = createInput("text", nama);
        let beratInput = createInput("number", berat);
        let gambarInput = createInput("text", gambar);
    
        let deleteData = createButton("Hapus", "deleteData(this)");
        let saveData = createButton("Save", "saveData(this)");
        let buttonContainer = document.createElement('div');
        buttonContainer.appendChild(deleteData);
        buttonContainer.appendChild(saveData);
    
        let inputArray = [
            namaInput,
            beratInput,
            gambarInput,
            buttonContainer
        ]
    
        for (let i = 0; i < inputArray.length; i++) {
            tdElement[i + 1].innerHTML = '';
            tdElement[i + 1].appendChild(inputArray[i]);
        }
    }
    
    function deleteData(button) {
        let buttonRow = button.closest('tr');
        let index = Number(buttonRow.children[0].textContent) - 1;
        tableDataStore.splice(index, 1);
        renderAll(tableDataStore);
    }
    
    function saveData(button) {
        let buttonRow = button.closest('tr');
        let index = Number(buttonRow.children[0].textContent) - 1;
    
        let nama = buttonRow.getElementsByTagName('input')[0].value;
        let berat = Number(buttonRow.getElementsByTagName('input')[1].value);
        let gambar = buttonRow.getElementsByTagName('input')[2].value;
    
        tableDataStore[index].nama = nama;
        tableDataStore[index].berat = berat;
        tableDataStore[index].gambar = gambar;
    
        renderAll(tableDataStore);
    }
    
    // ------------------------------------------------------------------------- //
    
    function createInput(inputType, inputValue) {
        let input = document.createElement("input");
        input.setAttribute("type", inputType);
        if (inputType === "number") {
            input.setAttribute("min", "1");
        }
        input.value = inputValue;
        return input;
    }
    
    function createButton(textContent, onclickFunction) {
        let button = document.createElement("button");
        button.textContent = textContent;
        button.setAttribute("onclick", onclickFunction);
        return button;
    }
    
    function createImg(src) {
        let img = document.createElement("img");
        img.setAttribute("src", src);
        img.setAttribute("alt", "Gambar");
        img.setAttribute("width", "80px");
        return img;
    }

Pembahasan

Karena hampir mirip dengan Mini Project Table Buah Datastore, di artikel ini hanya menjelaskan perbedaan atau penambahan pada kode.

1. Penambahan div HTML untuk pagination, ditambahkan div dengan id "pagination-container" yang berguna sebagai container untuk elemen pagination (anchor element). Kemudian div tersebut dipanggil dalam Javascript. 
<div id="pagination-container">
    <!-- Pagination -->
</div>

let paginationDiv = document.getElementById('pagination-container');

2. currentPage dan maxRows, buat variabel currentPage untuk melacak halaman yang sedang ditampilkan oleh pengguna, dan maxRows menentukan jumlah maksimum baris data yang akan ditampilkan dalam satu halaman. 
let currentPage = 1;
let maxRows = 5;

3. Function renderData(data), bertujuan untuk menampilkan data pada tabel buah sesuai dengan halaman yang sedang aktif. Pertama, function mengosongkan elemen tableBuah menggunakan innerHTML agar data sebelumnya dihapus. Selanjutnya, variabel startIndex dan endIndex digunakan untuk menentukan rentang data yang akan ditampilkan berdasarkan halaman saat ini dan jumlah maksimum baris per halaman (maxRows). Kemudian, function memanggil generateTable() dengan parameter data yang sudah dipotong sesuai rentang yang ditentukan sebelumnya. Hasil dari generateTable() akan ditambahkan ke dalam tableBuah. 
function renderData(data) {
    tableBuah.innerHTML = "";
    let startIndex = (currentPage - 1) * maxRows;
    let endIndex = startIndex + maxRows;
    let extractedData = data.slice(startIndex, endIndex);
    tableBuah.appendChild(generateTable(extractedData));
}

4. Function renderPagination(data), bertanggung jawab untuk membuat tautan halaman pada elemen HTML yang menyimpan navigasi pagination. Pertama, function ini menghapus isi dari elemen pagination (paginationDiv.innerHTML = "";). Selanjutnya, menghitung jumlah halaman yang diperlukan berdasarkan jumlah data dan jumlah maksimum baris per halaman. Selanjutnya, melakukan iterasi sebanyak jumlah halaman dan membuat elemen <a> untuk masing-masing halaman. Jika halaman tersebut merupakan halaman saat ini (if (i === currentPage)), maka tautan diberi kelas 'active' untuk menunjukkan bahwa halaman tersebut sedang aktif. Semua tautan halaman tersebut ditambahkan ke elemen paginationDiv. 
function renderPagination(data) {
    paginationDiv.innerHTML = "";
    let totalPages = Math.ceil(data.length / maxRows);
    for (let i = 1; i <= totalPages; i++) {
        let pageLink = document.createElement('a');
        pageLink.textContent = i;
        pageLink.setAttribute("onclick", "setPage(this)");
        if (i === currentPage) {
            pageLink.classList.add('active');
        }
        paginationDiv.appendChild(pageLink);
    }
}

5. Function renderAll(data), bertanggung jawab untuk merender ulang seluruh tampilan tabel dan tautan paginasi setiap kali terjadi perubahan data. Function ini memanggil function renderData(data) untuk merender ulang tabel data berdasarkan data yang diberikan. Kemudian, function ini memanggil renderPagination(data) untuk merender ulang tautan halaman paginasi berdasarkan jumlah total data. 
function renderAll(data) {
    renderData(data);
    renderPagination(data);
}

6. Function setPage(anchorElement), bertujuan untuk menetapkan halaman yang aktif saat pengguna mengklik tautan halaman pada pagination. Pertama, function ini menerima elemen anchor (a) sebagai parameter yang menunjukkan tautan halaman yang diklik. Kemudian, dari elemen tersebut, function mengekstrak nomor halaman yang terkait dan menetapkannya sebagai nilai variabel currentPage. Setelah itu, function memanggil renderAll(tableDataStore) untuk merender ulang tabel dan pagination dengan halaman yang baru. 
function setPage(anchorElement) {
    let pageLink = anchorElement;
    currentPage = Number(pageLink.textContent);
    renderAll(tableDataStore);
}

End

Jika sudah, kalian bisa mencoba program tersebut dengan mengakses laman ini.
Roihan Fajareno

Diposting oleh Roihan Fajareno

Posting Komentar

0 Komentar