I'm trying to create a pagination with jquery, but I dont want to show all page numbers, I want to make something like this : 1,2,3,...,20,21,22? here is what I did. I know I have to change some code into the for loop, but i'm not sure how to do that?

$(document).ready(function() {
  let params = new URLSearchParams(location.search);

  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      var count = Math.ceil(JSON.parse(xmlhttp.responseText).count / 10);
      console.log(count)
      var innerHTML = `<ul class="pagination">`
      if (parseInt(params.get('page')) !== 1) {
        innerHTML += `<li class="paginate_button page-item previous" id="collection_by_decade_previous">
                <a href="?page=` + (parseInt(params.get('page')) - 1).toString() + `" class="page-link">previous</a>
              </li>`
      } else {
        innerHTML += `<li class="paginate_button page-item previous disabled" id="collection_by_decade_previous">
                  <a href="#" class="page-link">previous</a>
                </li>`
      }

      for (var index = 1; index <= count; index++) {

        if (parseInt(params.get('page')) === index) {
          innerHTML += ` <li class="paginate_button page-item active">
                            <a href="?page=` + index + `" aria-controls="collection_by_decade"  class="page-link">` + index + `</a>
                          </li>`
        } else {
          innerHTML += ` <li class="paginate_button page-item">
                            <a href="?page=` + index + `" aria-controls="collection_by_decade"  class="page-link">` + index + `</a>
                          </li>`
        }
      }

      if (parseInt(params.get('page')) !== count) {
        innerHTML += `<li class="paginate_button page-item next" id="collection_by_decade_next">
                          <a href="?page=` + (parseInt(params.get('page')) + 1).toString() + `" class="page-link">next</a>
                        </li>`
      } else {
        innerHTML += `<li class="paginate_button page-item next disabled" id="collection_by_decade_next">
                          <a href="#" class="page-link">next</a>
                        </li>`
      }

      document.getElementById('lists_paginate').innerHTML = innerHTML;


    }
  }
  xmlhttp.open("GET", '/total_data', true);
  xmlhttp.send();

});