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