Estoy tratando de crear una paginación con jquery, pero no quiero mostrar todos los números de página, quiero hacer algo como esto: 1,2,3,...,20,21,22? Aquí esta lo que hice. Sé que tengo que cambiar algo de código en el bucle for, pero no estoy seguro de cómo hacerlo.

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