Show only a few page numbers of the pagination instead of all

Question

I made a pagination that is appearing every page:

I need it to look like this:

<< < 1 2 3 4 5 6 7... 50 > >>

<< < 4 5 6 7 8 9 10 ..60 > >>

I’m researching and testing different methods, but I still haven’t got anything that works.

<?php if ($num_pages > 1): ?>
<div class="paginador">
  <a href="javascript:void(0)" class="first">Inicio</a>
  <a href="javascript:void(0)" class="previous">Anterior</a>
  <?php for($i=1; $i<=$num_pages; $i++): ?>
  <a href="javascript:void(0)" class="page-index page-<?php echo $i ?>"><?php echo $i ?></a>
  <?php endfor; ?>
  <a href="javascript:void(0)" class="next">Próximo</a>
  <a href="javascript:void(0)" class="last">Último</a>
</div>
<?php endif; ?>

  $('.paginador .page-index').on('click', function() {
    var classe = $(this).attr('class');
    classe = classe.replace('page-index ', '');
    $('tr.comprovante-pages').hide();
    $('tr.' + classe).show();
  });

  $('.paginador .first').on('click', function() {
    $('tr.comprovante-pages').hide();
    $('tr.page-1').show();
  });

  $('.paginador .last').on('click', function() {
    $('tr.comprovante-pages').hide();
    $('tr.last-page').show();
  });

How can I increment this code to turn it into a pagination that changes the visible numbers? The buttons next and previous are not working either, would need to implement this too.