Ri Xu Online

If you're existing Laravel user, you know that Laravel has make pagination easy. If you're new, I will show you how.

First of all, in your app/routes.php, add in an extra routes.

<?php

// ...

Route::get('items', array(
    'as'    => 'items',
    'uses'  => 'ItemController@getIndex'
));

// Get items type

Route::get('items/ajax/{type}', array(
    'as'    => 'items.type',
    'uses'  => 'ItemController@getItemType'
))->where('type', 'first|second|third');

// ...

The where condition is to only match for either first, second or third.

Implement the Ajax method in app/controllers/ItemController.php

<?php

// ...

public function getIndex()
{
    return View::make('items');
}

public function getItemType($type)
{
    $items_per_page = Input::get('per_pg', 10);

    if ($type == 'first') {
        $items = First::paginate($items_per_page);
    } else if ($type == 'second') {
        $items = Second::paginate($items_per_page);
    } else if {
        $items = Third::paginate($items_per_page);
    }

    $view = View::make('item_type')->with('items', $items);
    return $view;
    exit;
}

// ...

Not return Json on the Ajax call, but instead, I return the whole bunch of HTML. But before that, make sure you create a model class for first, second and third just like what you did for ItemController.php just now.

Create a new view file that keep only the particular section of code

// in app/views/item_type.php

@foreach ($items as $item)
    <article>
        <h2>{{ $item->title }}</h2>
        {{ $item->summary }}
    </article>
@endforeach

{{ pagination($items->appends(Input::except('page')), 'layout.paginator') }}

// ...

The pagination link I also included into the ajax, this will make your life easier.

Then add in the Ajax call on the main view file, add the section to bottom right before in app/views/items.php.

$(function() {
    // 1.
    function getPaginationSelectedPage(url) {
        var chunks = url.split('?');
        var baseUrl = chunks[0];
        var querystr = chunks[1].split('&');
        var pg = 1;
        for (i in querystr) {
            var qs = querystr[i].split('=');
            if (qs[0] == 'page') {
                pg = qs[1];
                break;
            }
        }
        return pg;
    }

    // 2.
    $('#first').on('click', '.pagination a', function(e) {
        e.preventDefault();
        var pg = getPaginationSelectedPage($(this).attr('href'));

        $.ajax({
            url: '/items/ajax/first',
            data: { page: pg },
            success: function(data) {
                $('#first').html(data);
            }
        });
    });

    $('#second').on('click', '.pagination a', function(e) {
        e.preventDefault();
        var pg = getPaginationSelectedPage($(this).attr('href'));

        $.ajax({
            url: '/items/ajax/second',
            data: { page: pg },
            success: function(data) {
                $('#second').html(data);
            }
        });
    });

    $('#third').on('click', '.pagination a', function(e) {
        e.preventDefault();
        var pg = getPaginationSelectedPage($(this).attr('href'));

        $.ajax({
            url: '/items/ajax/third',
            data: { page: pg },
            success: function(data) {
                $('#third').html(data);
            }
        });
    });

    // 3.
    $('#first').load('/items/ajax/first?page=1');
    $('#second').load('/items/ajax/second?page=1');
    $('#third').load('/items/ajax/third?page=1');
});

• Look for the selected page number
• Create an event listener to listen the onclick event on the pagination link.
• When the page first loaded (which has no any click yet), load the first page of both items.

You have done.

Related Article

Laravel Ajax Pagination with jQuery
Custom Pagination in Laravel