Create automatic pagination with laravel and jquery

I need to create a manual pagination on laravel. I did not quite understand the logic of this topic:

Manual Paging in Laravel 5.1

But I need to get him to create the automatic pages. Not manual. See the example I made. It even works only that is not automatic:

 public function index(Request $request)
 {
 $qtd = $request['qtd'];
 $page = $request['page'];
 Paginator::currentPageResolver
(function () use ($page)
{
   return $page;
});
 $clientes = Clientes::paginate($qtd);
 $clientes = $clientes->appends
 (Request::capture()->except('page'));
 return response()->json
 (['clientes'=>$clientes], 200);
}

In this output it even creates the number of pages of type last_page = 5. Up to 5 pages. But I need to implement this in javascript:

JAVASCRIPT I BRING THE PAGE:

 function retorna_cliente(valor)
 {
var id_cliente = "";
var nome_cliente = "";
var data_nascimento_cliente = "";
var telefone_cliente = "";
var celular_cliente = "";
var cpf_cliente = "";
var cnpj_cliente = "";
var endereco_cliente = "";
var email_cliente = "";
var cliente = "";
var mostra_dados_pessoa = "";
var container_mostra_cliente = $('.mostra_clientes');
var itemHTML = "";
var mensagem_cliente = "Nenhum cliente encontrado";
var quantidade = $("#qtd").val();
var pagina = 5;
var total_page = "";
var page = "";

if (valor == null)
{
  total_page = 1;
}
else if (valor == 'proximo')
{
  page = 1;
  total_page = page + 1;
}
else if (valor == 'anterior')
{
  page = 1;
  total_page = page - 1;
}

$.ajax({
  url: url_base + "clientes?qtd=" + quantidade + "&page=" + total_page,
  type: 'GET',
  dataType: 'json',
  success: function (data)
  {
    var retorno = data.clientes.data;
    if (retorno == 0)
    {
      $('.classe-cliente').css('display','none');
      $('.cliente-error-registro').css('display','block');
      $('.cliente-error-registro .mensagem-erro').html(mensagem_cliente);
    }
    else
    {

      $.each(data, function(key,item) {

        let current_page = item.current_page;
        let last_page = item.last_page;
        let next_page_url = item.next_page_url;
        let prev_page_url = item.prev_page_url;
        let clientes = item.data;

        if (next_page_url == null)
        {
          $('.actionBar').html("<a id='btn-prox-pagina-cliente' title='Próxima Página' class='buttonNext btn btn-success' style='display:none;'>Próxima Página >></a><a id='btn-pagina-anterior-cliente' title='Pàgina Anterior' class='buttonPrevious btn btn-primary' style='display: block; clear:both; width:150px; float: left;'><< Página Anterior</a>");
        }
        else if (prev_page_url == null)
        {
          $('.actionBar').html("<a id='btn-prox-pagina-cliente' title='Próxima Página' class='buttonNext btn btn-success'>Próxima Página >></a><a id='btn-pagina-anterior-cliente' title='Pàgina Anterior' class='buttonPrevious btn btn-primary' style='display: none;'><< Página Anterior</a>");
        }
        else if (next_page_url != null || prev_page_url != null)
        {
          $('.actionBar').html("<a id='btn-prox-pagina-cliente' title='Próxima Página' class='buttonNext btn btn-success'>Próxima Página >></a><a id='btn-pagina-anterior-cliente' title='Pàgina Anterior' class='buttonPrevious btn btn-primary'><< Página Anterior</a>");
        }

        for (var i in clientes) {

          id_cliente = clientes[i].id;
          nome_cliente = clientes[i].nome;
          telefone_cliente = clientes[i].telefone;
          cpf_cliente = clientes[i].cpf;
          cnpj_cliente = clientes[i].cnpj;
          endereco_cliente = clientes[i].endereco;
          email_cliente = clientes[i].email;
          cliente = clientes[i].cliente;

          if (cpf_cliente == null)
          {
            mostra_dados_pessoa = cnpj_cliente;
          }
          else
          {
            mostra_dados_pessoa = cpf_cliente;
          }

          itemHTML += "<tr>";
          itemHTML += "<td><th><input type='checkbox' value='" +  id_cliente + "' name='verifica_check_box[]' id='verifica_check_box' class='flat'/></th></td>";
          itemHTML += "<td>" + nome_cliente + "</td>";
          itemHTML += "<td>" + telefone_cliente + "</td>";
          itemHTML += "<td>" + mostra_dados_pessoa  + "</td>";
          itemHTML += "<td>" + endereco_cliente + "</td>";
          itemHTML += "<td>" + email_cliente  + "</td>";
          itemHTML += "<td>" + cliente  + "</td>";
          itemHTML += "</tr>";
        }

      });
      container_mostra_cliente.html(itemHTML);
    }

  },
  error: function (XMLHttpRequest, textStatus, errorThrown)
  {
    console.log(data);
  }
});
 }