使用香草 javascript 和点进行分页

Question

我在 javascript 中有一个分页，我想在该分页中添加带点的步骤。 以照片为例，我想要三页后和最后三页前的点。

1 2 3...10 11 12

Screenshot

我有一个 var pagesize 和总项目数。 ajax调用成功时第一次创建分页

// 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;
        }

我这样计算总页数

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

我的页面上有那一代分页

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
        });
    });
}

谢谢。 问候， 乔治

Answer 1

我希望这样做。如果你不明白，请告诉我。

基本上，每页都有不同的情况，点 ... 作为占位符。

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>