title: Pagination with vanilla javascript and dots
body: <p>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.</p>
  <p>1 2 3...10 11 12</p>
  <p><a href="https://i.stack.imgur.com/A5iYs.png" rel="nofollow noreferrer">Screenshot</a></p>
  <p>I have a var pagesize and total items. The pagination is created the first time when ajax call is on success</p>
  <pre><code>// 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;
  </code></pre>
  <hr />
  <pre><code>            success: function(data) {
              var data = JSON.parse(data);
              var content = '';
  
              if ( data.errors || data.info.total &lt; 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;
          }
  </code></pre>
  <p>I calculate total pages like that</p>
  <pre><code>function calculateTotalPages(totalItems, pageSize) {
      return Math.ceil(totalItems/pageSize);
  }
  </code></pre>
  <p>And i have that generation of pagination on my page</p>
  <pre><code>function generatePaginationList(totalPages) {
      const paginationWrapper = document.querySelector('#pagination-wrapper');
      const list = document.createElement('ul');
      list.className = 'pagination';
  
      for(i = 0; i &lt; 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 =&gt; {
          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
          });
      });
  }
  </code></pre>
  <p>Thank you.
  Regards,
  George</p>