jquery - Paginación AJAX con Laravel

search pagination

Question

Tengo esta vista llamada posts.blade.php que se incluye en home.blade.php :

<div id="posts">
    @foreach ($posts as $post)
        <div class="list-item clearfix">
            <div class="content">
                <img src="{{ URL::to($post->thumbnail) }}" alt="" />
                <h1>{{{ $post->title }}}</h1>
            </div>
            <div class="score">{{ $post->rating }}</div>
        </div>
    @endforeach
    <div id="pagination">{{{ $posts->links() }}}</div>
</div>

Cuando un usuario busca determinadas publicaciones, la función postSearch() del controlador devuelve una respuesta JSON:

function postSearch() 
{
    $posts = $posts->select(...)->where(...)->orderBy(...)->paginate(5); //Search posts

    return Response::json(View::make(''includes.posts'', [''posts'' => $posts])->render());
}

Y jQuery agrega el HTML en el div #posts :

$(''#search'').submit(function(e) {
    e.preventDefault();
    var form = $(this);

    $.post(form.attr(''action''), form.serialize(), function(data) {
        $(''#posts'').html(data);
    });
});

Esto funciona perfecto Pero ahora, cuando hago clic en un enlace de paginación, la página se vuelve a cargar y los resultados de mi búsqueda desaparecen (es obvio). ¿Cómo pagino estas publicaciones? He leído esto , este y este artículo, pero no entiendo cómo implementarlo.

Editar

Este es mi jQuery para la paginación hasta ahora:

$(''#posts'').on(''click'', ''.pagination a'', function(e) {
    e.preventDefault();
    var url = $(this).attr(''href''),
        page = url.split(''page='')[1],
        data = $(''#search'').serializeArray();

    data.push({page: page}); // Add page variable to post data
    console.log(data);

    $.post($(''#search'').attr(''action''), data, function(data) {
        $(''#posts'').html(data[''posts'']);
    });
});

Estos son los datos que se envían cuando hago clic en un enlace de paginación (página 2):

Lamentablemente, no sucede nada, las publicaciones de la página 1 siguen apareciendo.

Answer 1

No estoy muy familiarizado con la paginación en Laravel, pero a juzgar por los enlaces que enumeró, no parece demasiado difícil. Este código aún no ha sido probado ...

$(''#pagination a'').on(''click'', function(e){
    e.preventDefault();
    var url = $(this).attr(''href'');
    $.post(url, $(''#search'').serialize(), function(data){
        $(''#posts'').html(data);
    });
});

Actualizar

En caso de que los enlaces de paginación sean incorrectos (como lo fueron para OP), usted debe construir la url por su cuenta.
Simplemente tome la url que desea y agregue ?page=#number a ella.

// page being the page number stripped from the original link
var url = $(''#search'').attr(''action'')+''?page=''+page;

Answer 2

Tengo la herramienta perfecta para el trabajo. Por favor revise este informe https://github.com/themightysapien/ajaxtable

Por favor, lea los documentos, es muy fácil de usar y está especialmente diseñado para laravel. Todo lo que necesita hacer es devolver sus resultados como en el siguiente ejemplo.

return Response::json(array(
              ''data''=> View::make(''only_table_row_view'', compact(''collection'')->render(),
              ''pagination''=>(string) $collection->links()
              ));

Los archivos requeridos son agregados

<link rel="stylesheet" href="css/ajaxtable.css">
<script src="js/plugins.js"></script>
$(".yourtable").ajaxtable();

Inicialice su url ajax a través del atributo data-requestUrl en su tabla. Agregue un id = "paginationWrapper" div en su página donde desea que aparezca su paginación.

Si tiene algún problema, ejecute el repositorio en su servidor local y vea la fuente de las marcas de revisión html y las opciones de complementos.

Answer 3

Estoy usando following js para obtener datos sobre href click.

// Your Local url 
var Url = ''laraveltestproject/laravelpagination'';

$(''#ajaxContent'').load("Url");

$(''.pagination a'').on(''click'', function(event) {

    event.preventDefault();
    if ($(this).attr(''href'') != ''#'') {
        $(''#ajaxContent'').load($(this).attr(''href''));
    }
});

Para ver un ejemplo completo, puede visitar http://www.tutsway.com/laravel-ajax-pagination-example.php .

Answer 4

Ejemplo de publicación en un blog, resuelva paginar recarga en el botón eliminar: (sinple foreach pero debe dar una identificación al panel y botón y una clase a botón y usar $ post-> id para definir todo)

El truco al fin no es llamar a la vista / controlador que usa pagination () pero la vista cambia con javascript como lo desee.

      @foreach($posts as $post)
    <div id="panel{{$post->id}}" class="panel panel-default">
      <div class="panel-body">
        {!! $post->content !!}
      </div>
      <div class="panel-footer">
        <span class="label label-default"><span class="glyphicon glyphicon-time"></span> creado {{$post->created_at->diffForHumans()}}</span>
        <span class="label label-default"><span class="glyphicon glyphicon-time"></span> modificado {{$post->updated_at->diffForHumans()}}</span>
        <span class="label label-success">autor: {{ imagica/User::find($post->user_id)->name}}</span>
        @if(Auth::user()->id === $post->user_id)

          <form method="post" style="position:relative; top:-25px;">
            <button class="btn btn-danger btn-sm pull-right destroy" id="{{$post->id}}" type="button" >eliminar</button>
          </form>

          <form action="{{ action(''PostsController@edit'', $post->id) }}" method="get" style="position:relative; top:-25px;">
            <button class="btn btn-warning btn-sm pull-right" type="submit" >Editar</button>
            {{-- {{ csrf_field() }} --}}
          </form>
        @endif
      </div>
    </div>
  @endforeach

al final de la vista javascript:

$(function(){
$(".destroy").on("click", function(){
  var vid = $(this).attr("id");
  var v_token = "{{csrf_token()}}";
  var parametros = {_method: ''DELETE'', _token: v_token};
  var archivo = "http://imagica.app/posts/" + vid + "";
  $.ajax({
     type: "POST",
     url: archivo,
     data: parametros,
     success: function(data){
       $(''#panel''+ data).hide();
       location.reload();
     }
  });
});
});

En la función de destrucción del controlador (note que envía $ post-> id como datos a ajax, se usa para definir selectores para ocultar el panel de la publicación que elimina):

    public function destroy($id)
{
  $post= Post::find($id);
  $article_id= $post->article_id;
  $article= Article::find($article_id);
  $msg = session()->flash(''message'', "Post eliminado.");
  $post-> delete();
  $data= $post->id;
  return $data;
}

En la última función de javascript, "location.reload ()" es para cargar el mensaje flash.