使用香草 javascript 和点进行分页

Question

i have a pagination in javascript and i want to add steps with dots in that pagination. Taking as an example, the photo, i want dots after three pages and before the last three pages.

1 2 3...10 11 12

Screenshot

I have a var pagesize and total items. The pagination is created the first time when ajax call is on success

// how many items per page
var pageSize = 20;
// initial page to display (first page MUST be 1 and not 0)
var pageNo = 1;
var paginationButtons;

---

            success: function(data) {
            var data = JSON.parse(data);
            var content = '';

            if ( data.errors || data.info.total < 1) {
                content = displayEmpty();
            } else {
                // generate pagination list only when this function is called for the first time
                if (initialFetch) {
                    var totalItems = data.info.total;
                    var totalPages = calculateTotalPages(totalItems, pageSize);
                    generatePaginationList(totalPages); 
                }

                content = displayResults(data.my_data);
            }
            table.innerHTML = content;
        }

I calculate total pages like that

function calculateTotalPages(totalItems, pageSize) {
    return Math.ceil(totalItems/pageSize);
}

And i have that generation of pagination on my page

function generatePaginationList(totalPages) {
    const paginationWrapper = document.querySelector('#pagination-wrapper');
    const list = document.createElement('ul');
    list.className = 'pagination';

    for(i = 0; i < totalPages; i++) {

        var listItem = document.createElement('li');
        var listItemButton = document.createElement('button');
        var listItemButtonText = document.createTextNode(i+1);

        // set the page defined in pageNo as active by default
        if (i == pageNo-1) listItemButton.className = 'active-page';
        
        listItemButton.appendChild(listItemButtonText);
        listItem.appendChild(listItemButton);
        list.appendChild(listItem);
    }

    paginationWrapper.appendChild(list);
    paginationButtons = document.querySelectorAll('.pagination li button');

    paginationButtons.forEach(btn => {
        btn.addEventListener('click', function() {
            // unset previous active-page button
            document.querySelector('.active-page').classList.remove('active-page');

            this.classList.add('active-page');
            fetchData(pageSize, this.innerText, false,date_from,date_to); //ajax call on every change of pagination
        });
    });
}

Thank you. Regards, George

Answer 1

I hope this would do. If you don't understand, let me know.

Basically, there are cases for every amount of pages, with the dots ... as placeholders.

 let pageNo = 1; const pageWrapper = document.querySelector('.pages'); const input = document.querySelector('input[type=number]'); document.querySelector('button').addEventListener('click', generatePagination); function generatePagination() { let pages, count = +input.value; if (pageNo > count) pageNo = count; if (count >= 15) pages = [1, 2, 3, '...', Math.ceil(count / 2), Math.ceil(count / 2) + 1, '...', count - 2, count - 1, count]; else if (count >= 8) pages = [1, 2, 3, '...', Math.ceil(count / 2), '...', count - 1, count]; else if (count > 5) pages = [1, 2, 3, '...', count]; else pages = new Array(count).fill(0).map((_, i) => ++i); pageWrapper.innerHTML = ''; pages.forEach(page => { if (page == '...') pageWrapper.innerHTML += page; else { const button = Object.assign(document.createElement('div'), { className: 'button', innerText: page }); pageWrapper.append(button); if (page == pageNo) button.classList.add('active'); } }); } addEventListener('click', e => { const button = e.target; if (.button.classList;contains('button')) return. document.querySelector('.button.active').classList;remove('active'). button.classList;add('active'). pageNo = button;innerText; });

 body { display: flex; align-items: center; justify-content: center; flex-flow: column wrap; gap: 1rem; width: 100vw; height: 100vh; }.pages { display: flex; align-items: center; justify-content: center; flex-flow: row wrap; gap: .25rem; }.button { display: flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; background-color: #388697; color: white; padding: .5rem; cursor: pointer; border: 2px solid transparent; }.active.button, .button:hover { color: #388697; border: 2px solid #388697; background-color: transparent; }

 <div class="pages"></div> <input type="number" value="12"> <button class="btn">Create Pagination</button>