html-test/script.js

console.log("HI ME");

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

for (i = 0; i < 1000; i++) {
    data[i] = {
        h1: `bla ${i}`, h2: `üh ${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) => {
        let table = document.querySelector("#tracking .table");
        let firstRowOfPage = itemsPerPage * currentPage - itemsPerPage;
        itemsPerPage = parseInt(evt.target.value);

        // reassign page to row
        table.querySelectorAll('[data-row]').forEach((rowItem, index) => {
            let row = rowItem.dataset.row;
            let page = Math.floor((row - 1) / itemsPerPage) + 1;

            rowItem.dataset.page = page;
        });

        createPagination();
        // console.log(firstRowOfPage, Math.floor((firstRowOfPage) / itemsPerPage) + 1);
        activatePage(Math.floor((firstRowOfPage) / itemsPerPage) + 1);
    });
}

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 rowContainer = document.createElement('div');
        rowContainer.classList.add("row");

        let moreButton = document.createElement('div');
        moreButton.dataset.row = row;
        moreButton.dataset.page = page;
        moreButton.innerHTML = "&nbsp;";
        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";
        details.innerHTML = "<div>A LOT OF DETAILS</div>"

        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")
        }
        rowContainer.append(moreButton);
        rowContainer.append(h1);
        rowContainer.append(h2);
        rowContainer.append(h3);
        rowContainer.append(h4);
        rowContainer.append(details);

        table.append(rowContainer);
    }

    addDetailEventListeners();
    createPagination();
}

function addDetailEventListeners() {
    document.querySelectorAll("#tracking .row").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;
            const details = item.querySelector(".details");
            // toggle details panel
            if (details.style.maxHeight) {
                details.style.maxHeight = null;
            } else {
                details.style.maxHeight = details.scrollHeight + 18 + "px";
            }
        });
    });
}

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

    // only create pagination if necessary 
    if (data.length > itemsPerPage) {
        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;";

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

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

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

    // change active state (only if paginator is not empty)
    if (paginator.hasChildNodes()) {
        paginator.childNodes.forEach(item => {
            item.classList.remove('active');
        });
        paginator.querySelector(`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');
    })
}