Pagination Laravel AJAX?

Question

By default Laravel pagination refresh page every time. I don't want this to happen

public function getPaginate($n)
    {
        return $this->model->with('professional')
        ->orderBy('extras.created_at', 'desc')
        ->paginate($n);
    }

In the controller :

$extras = $this->extraRepository->getPaginate(3);
$links = $extras->render();

And i send $link to the view.

<div class="pagination">{!! $links !!}</div>
           </div>
        </div>

        <div class="row">
           <div class="small-12 columns">
              <ul class="large-block-grid-3 medium-block-grid-2 small-block-grid-1">
                 @if(empty($extras))
                    <p class="empty-notice">Sorry, no extra available at the moment. Come back later</p>
                 @else
                    @foreach ($extras as $extra)
                    <li class="extra-available">@include('user.card', ["description" => $extra->professional->company_name." in ".
                                                                $extra->type.
                                                                ' for '.$extra->date.' at '.$extra->date_time,
                                               "title" => $extra->professional->company_name,
                                               "image" => asset("../resources/assets/images/extra-card-example.png"),
                                               "id"  => $extra->id])
                    </li>
                    @endforeach
                 @endif
              </ul>
           </div>
        </div>

I tried to implement an AJAX request like so :

$(".pagination a").click(function(e){
    e.preventDefault();
    var url = $(this).attr('href');
    //alert(url);
    $.ajax({
        url: url,
        type: "GET",
        success: function(data){
            $('.extra-available').html(data);
        }
    });
});

but it returns me an entire html doc, i just want what's in .extra-available.

Any ideas ?

If you ever try with dataTables with server-side, please let me know how you did it. It also works with bootstrap styling. — Pathros
– Pathros, Commented Jul 26, 2016 at 14:31

xmhafiz · Accepted Answer · 2016-07-26 14:27:10Z

3

I think it is better to prepare API to be called by your ajax in json format. The json return is very useful to do paginate. You will get as below data (in laravel 5.2).

{
    "total": 18,
    "per_page": 15,
    "current_page": 1,
    "last_page": 2,
    "next_page_url": "http://example.com/products?page=2",
    "prev_page_url": null,
    "from": 1,
    "to": 15,
    "data": [] // a list of your data here
}

You API controller will be look like this. Dont need to use the $n. Laravel will get the current page from the page GET parameter

$data = Model::orderBy('extras.created_at', 'desc')->paginate();
return response()->json($data);

So your ajax code can call the next page data based in the next_page_url, as well as the previous page using prev_page_url if it exist. All about paging is there including total records, current page and total records display in page

answered Jul 26, 2016 at 14:27

xmhafiz

3,5382 gold badges20 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Baptiste Arnaud Over a year ago

How does it solve my problem ? I don't want the page to be refreshed !

xmhafiz Over a year ago

yes surely it will not refresh, you only will call that next_page_url in your ajax, then populate the json data to your table or view using jquery stackoverflow.com/questions/17724017/…

Alfredo EM · Accepted Answer · 2016-07-26 14:40:52Z

1

Try this:

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

answered Jul 26, 2016 at 14:40

Alfredo EM

2,0791 gold badge16 silver badges17 bronze badges

Collectives™ on Stack Overflow

Pagination Laravel AJAX?

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related