control_frontend_pagination.js

function renderPostsCallback(pages_total = 1, current_page = 1, has_previous = false, has_next = false) {
    /* control frontend pagination */
    let max = 5
    if (pages_total < 5) {
        max = pages_total
    }
    let max_left = 2
    if (current_page<3) {
        max_left = current_page-1
    }

    let max_right = max-1-max_left
    if (pages_total-current_page<3) {
        max_right = pages_total-current_page
        max_left = max-1-max_right
    }

    const pagination_containers = document.querySelectorAll(".pagination")
    pagination_containers.forEach(item => {
        // clear
        while (item.firstChild) {
            item.removeChild(item.lastChild)
        }

        if (has_previous) {
            item.innerHTML += `
                <button class="page-item page-link" data-page="${current_page-1}" onclick="onPagination(this)">Previous</button>
            `
            for (let i=current_page-max_left; i<current_page; i++) {
                item.innerHTML += `
                    <button class="page-item page-link" data-page="${i}" onclick="onPagination(this)">${i}</button>
                `
            }
        } else {
            // item.innerHTML += `
            //     <button class="page-item page-link inactive" data-page="prev" disabled>Previous</button>
            // `
        }

        item.innerHTML += `
            <button class="page-item page-link active" data-page="${current_page}" onclick="onPagination(this)">${current_page}</button>
        `

        if (has_next) {
            for (let i=current_page+1; i<current_page+max_right+1; i++) {
                item.innerHTML += `
                    <button class="page-item page-link" data-page="${i}" onclick="onPagination(this)">${i}</button>
                `
            }
            item.innerHTML += `
                <button class="page-item page-link" data-page="${current_page+1}" onclick="onPagination(this)">Next</button>
            `
        } else {
            // item.innerHTML += `
            //     <button class="page-item page-link inactive" data-page="next" disabled>Next</button>
            // `
        }
    })
}