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.