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](https://datatables.net/examples/data_sources/server_side.html), please let me know how you did it. It also works with [bootstrap styling](https://datatables.net/examples/styling/bootstrap.html). — Pathros, Jul 26 '16 at 14:31

score 3 · Answer 1 · answered Jul 26 '16 at 14:27

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

How does it solve my problem ? I don't want the page to be refreshed ! — Baptiste Arnaud, Jul 26 '16 at 14:31
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 http://stackoverflow.com/questions/17724017/using-jquery-to-build-table-rows-from-ajax-responsejson — xmhafiz, Jul 26 '16 at 14:36

score 1 · Answer 2 · answered Jul 26 '16 at 14:40

1

Try this:

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

answered Jul 26 '16 at 14:40

Alfredo EM

2,029
1
14
16

Pagination Laravel AJAX?

2 Answers2