html-test/script.js

console.log("HI ME");

let data = [
    { h1: "bla", h2: "uh", h3: "ah", h4: "bah" },
    { h1: "bla", h2: "uh", h3: "ah", h4: "bah" },
    { h1: "bla", h2: "uh", h3: "ah", h4: "bah" },
    { h1: "bla", h2: "uh", h3: "ah", h4: "bah" },
    { h1: "bla", h2: "uh", h3: "ah", h4: "bah" },
    { h1: "bla", h2: "uh", h3: "ah", h4: "bah" },
    { h1: "bla", h2: "uh", h3: "ah", h4: "bah" },
    { h1: "bla", h2: "uh", h3: "ah", h4: "bah" },
    { h1: "bla", h2: "uh", h3: "ah", h4: "bah" },
    { h1: "bla", h2: "uh", h3: "ah", h4: "bah" },
    { h1: "bla", h2: "uh", h3: "ah", h4: "bah" },
    { h1: "bla", h2: "uh", h3: "ah", h4: "bah" },
]

for (i = 0; i < 1000; i++) {
    data[i] = {
        h1: `bla ${i}`, h2: `uh ${i}`, h3: `ah ${i}`, h4: `bah ${i}`
    };
}

let itemsPerPage = 10;
let currentPage = 1;

drawData();
addItemsPerPageEventListener();

function addItemsPerPageEventListener() {
    document.querySelector("#tracking .items-per-page").addEventListener('change', (evt) => {
        console.log(evt.target.value);
    });
}

function drawData() {
    let table = document.querySelector("#tracking .table");
    let lastHeader = [...table.querySelectorAll("#tracking .table .header")].at(-1);

    // remove current data
    let nextSibling = lastHeader.nextSibling;
    while (nextSibling) {
        nextSibling.remove();
        nextSibling = lastHeader.nextSibling;
    }

    for (let [index, item] of data.entries()) {
        let row = index + 1;
        let page = Math.floor((row - 1) / itemsPerPage) + 1;

        let moreButton = document.createElement('div');
        moreButton.dataset.row = row;
        moreButton.dataset.page = page;
        moreButton.classList.add("open-button");

        let details = document.createElement('div');
        details.dataset.row = row;
        details.dataset.page = page;
        details.classList.add("details");
        details.innerText = "A LOT OF DETAILS";

        let h1 = document.createElement('div');
        h1.dataset.row = row;
        h1.dataset.page = page;
        h1.innerText = item.h1;
        let h2 = document.createElement('div');
        h2.dataset.row = row;
        h2.dataset.page = page;
        h2.innerText = item.h2;
        let h3 = document.createElement('div');
        h3.dataset.row = row;
        h3.dataset.page = page;
        h3.innerText = item.h3;
        let h4 = document.createElement('div');
        h4.dataset.row = row;
        h4.dataset.page = page;
        h4.innerText = item.h4;

        if (row > itemsPerPage) {
            moreButton.classList.add("hidden")
            h1.classList.add("hidden")
            h2.classList.add("hidden")
            h3.classList.add("hidden")
            h4.classList.add("hidden")
            details.classList.add("hidden")
        }
        table.append(moreButton);
        table.append(h1);
        table.append(h2);
        table.append(h3);
        table.append(h4);
        table.append(details);
    }

    addDetailEventListeners();
    createPagination();
}

function addDetailEventListeners() {
    document.querySelectorAll("#tracking .open-button").forEach(item => {
        item.addEventListener('click', (evt) => {
            item.classList.toggle("open");
            const details = document.evaluate("following-sibling::div[contains(@class, 'details')]", item, null,
                XPathResult.FIRST_ORDERED_NODE_TYPE).singleNodeValue;
            // toggle details panel
            if (details.style.maxHeight) {
                details.style.maxHeight = null;
            } else {
                details.style.maxHeight = details.scrollHeight + "px";
            }
        });
    });
}

function createPagination() {
    let container = document.querySelector("#tracking .pagination");

    let left = document.createElement('div');
    left.innerHTML = "&laquo";
    left.addEventListener('click', (evt) => {
        let activatedPage = parseInt(currentPage);
        if (activatedPage > 1)
            activatePage(activatedPage - 1);
    });
    let right = document.createElement('div');
    right.addEventListener('click', (evt) => {
        let activatedPage = parseInt(currentPage);
        if (activatedPage < data.length / itemsPerPage)
            activatePage(activatedPage + 1);
    });
    right.innerHTML = "&raquo;";

    container.append(left);
    for (i = 1; i <= data.length / itemsPerPage; i++) {
        let mark = document.createElement('div');
        mark.innerText = i;
        mark.dataset.pagination = i;
        container.append(mark);

        mark.addEventListener('click', (evt) => {
            activatePage(evt.target.innerText);
        })
    }
    container.append(right);

}

function activatePage(page) {
    let table = document.querySelector('#tracking .table');

    // change active state
    document.querySelectorAll("#tracking .pagination div").forEach(item => {
        item.classList.remove('active');
    });
    document.querySelector(`#tracking .pagination div[data-pagination="${page}"]`).classList.add('active');
    currentPage = page;

    // hide all rows
    table.querySelectorAll('[data-row]').forEach((rowItem) => {
        rowItem.classList.add('hidden');
    });
    // display rows of selected page
    table.querySelectorAll(`[data-page="${page}"]`).forEach(rowItem => {
        rowItem.classList.remove('hidden');
    })
}