AJAX pagination with Laravel

Question

I have this view called posts.blade.php which gets included in home.blade.php:

    @foreach ($posts as $po         


        
                      

              相关标签:
       
      

Answer 1

Example for post in a blog, solve paginate reload on delete button: (sinple foreach but you must give a id to panel and button and a class to button and use $post->id to define all)

The trick at last is not call the view/controller that uses pagination() but the view change with javascript as you want.

      @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

at last of the view 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();
     }
  });
});
});

In controller destroy function (note you send $post->id as data to ajax, it is used to define selectors to hide panel of post you delete):

    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;
}

In javascript last function "location.reload()" is in order to charge flash message.

Answer 2

I'm not very familiar with pagination in Laravel but judging from the links you listed it doesn't look too hard. This code is untested though...

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

Update

In case the pagination links are wrong (like the were for the OP) you have to build the url by yourself.
Just take the url you want and add ?page=#number to it.

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

Answer 3

I have the perfect tool for the job. Please check out this repo https://github.com/themightysapien/ajaxtable

Please read the docs it is very easy to use and is specially made for laravel. All you need to do is return your results as following example.

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

Required files are add

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

Initialize your ajax url through data-requestUrl attribute in your table. Add a id="paginationWrapper" div in your page where you want your pagination to appear.

If you have any problem run the repo in your local server and see the source for html markups and plugin options.

Answer 4

I am using following js for getting data on 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'));
    }
});

For Complete example you can visit the http://www.tutsway.com/laravel-ajax-pagination-example.php.