Paginated table with ajax

I'm using laravel 5.4. In my table I bring the forms that the users completed. It looks like this

I use a select, to be able to bring in a json and complete the table select:

   <select  id="myselect" class="selectpicker" data-show-subtext="true" data-size="4" data-live-search="true" name="taskOption" title="Buscar">
       <?php foreach ($users as $user): ?>
                <option data-subtext="{{$user->email}}" value="{{$user->id}}">{{$user->name}}</option>
       <?php endforeach; ?>
   </select>

table:

<div class="panel-body no-padding table-responsive">
    <table  class="table table-hover">
      <thead>
        <tr>
           <th>Nombre y apellido</th>
           <th>Dni</th>
           <th>Edificio</th>
           <th>Torre</th>
           <th>Piso/Dep</th>
           <th>Cant</th>
           <th>Fecha</th>
           <th>Inquilino?</th>
           <th>Fin contrato</th>
           <th>Observación</th>
           <th>L g</th>
           <th>Pago</th>
           <th>Entrega</th>
       </tr>
      </thead>
      <tbody id="tabla">

      </tbody>
    </table>
</div>

the json that returns me is the following

[{"nombre":["Martina","sdasd"],"apellido":["Gonzalez","sadsada"],"dni":[4200090,123],"edificio":["gama","dasda"],"torre":["hola","3"],"departamento":["C","C"],"cantidad":[2,1],"fecha":["2017-08-28","2017-08-28"],"llavero":[1,0],"estado":[0,0],"estadoentregado":[0,0],"piso":["J","2"],"dueno":["no","no"],"contrato":["-","-"],"descripcion":["hola","-"],"id":[17,18]}]

the script I use to complete the table is:

<script>
  $(function() {
    $('#myselect').change(function(){
      var seleccionado = $(this).find(':selected').val();
      $.ajax({
              type:'get',
              url:'/buscar/'+seleccionado+'/',
              dataType: 'json',
              data:'/buscar/'+seleccionado+'/',
              success: function (response) {
                $('#tabla tr').remove();
                var trHTML = '<tr>';
                for (var i = 0; i < response[0].nombre.length; i++) {
                  if(response[0].estado[i]==0){h='<a href="/actualizarpago/${response[0].id[i]}"><i style="color:red" class="fa fa-times"></i>';}
                  else{h = '<a href="/actualizarpago/${response[0].id[i]}"><i style="color:green" class="fa fa-check"></i></a>'}
                  if(response[0].estadoentregado[i]==0){ p='<a href="/actualizar/${response[0].id[i]}"><i style="color:red" class="fa fa-times"></i></a>';}
                  else{p = '<i style="color:green" class="fa fa-check"></i>'}
                  if(response[0].llavero[i]==0){l='<i style="color:red" class="fa fa-times"></i>';}
                  else{l = '<i style="color:green" class="fa fa-check"></i>'}
                  var lg = '<td id="fila'+[i]+'" onclick="seleccionar(this.id);">'+ l + '</td><td>';
                  trHTML += '<td>' + response[0].nombre[i]+' '+ response[0].apellido[i] +'</td><td>'
                  + response[0].dni[i] + '</td><td>'
                  + response[0].edificio[i] + '</td><td>'
                  + response[0].torre[i] + '</td><td>'
                  + response[0].piso[i]+' / '+ response[0].departamento[i] + '</td><td>'
                  + response[0].cantidad[i] + '</td><td>'
                  + response[0].fecha[i] + '</td><td>'
                  + response[0].dueno[i] + '</td><td>'
                  + response[0].contrato[i] + '</td><td>'
                  + response[0].descripcion[i] + '</td>'+lg
                  + h + '</td><td>'
                  + p + '</td><tr>';
                }
                trHTML += '</tr>';
                 $('#tabla').append(trHTML);
              },
            });
          });
  });
  </script>

My problem is that I do not know how to paginate the data in the table that comes in the json. Also in the table has two columns "Payment" and "Delivered" which you can click to change status (Actually you have to click one by one to change the status), I want to add the functionality that can select several.