Online Snippets Library

Laravel ajax pagination example

Here we use bit of jquery code to load paginated result via ajax.

Example

We will use following step to perform ajax pagination operation in Laravel.
  1. First We create table.

    CREATE TABLE student( `id` int(11) NOT NULL AUTO_INCREMENT, `firstName` varchar(50) DEFAULT NULL, `class` char(20) DEFAULT NULL, PRIMARY KEY (`id`) ); INSERT INTO `student`(`id`,`firstName`,`class`) VALUES (NULL,'Manish','Grade-12'); INSERT INTO `student`(`id`,`firstName`,`class`) VALUES (NULL,'Pawan','Grade-11'); INSERT INTO `student`(`id`,`firstName`,`class`) VALUES (NULL,'Kripal','Grade-10'); INSERT INTO `student`(`id`,`firstName`, `class`) VALUES (NULL, 'Priya', 'Grade-12'); INSERT INTO `student`(`id`,`firstName`, `class`) VALUES (NULL, 'Payal', 'Grade-11'); INSERT INTO `student`(`id`,`firstName`,`class`) VALUES (NULL,'Pradeep','Grade-10'); INSERT INTO `student`(`id`,`firstName`,`class`) VALUES (NULL,'Punit','Grade-12');
  2. Now we create route for ajax pagination inside app/routes.php.

    Route::any('laravelpagination/',array('as' => 'laravelpagination',
                                   'uses' => '[email protected]'));
    Route::any('laravelajaxpagination/',array('as' => 'laravelajaxpagination',
                                   'uses' => '[email protected]'));
    
  3. Create Controller file inside app/controllers/LaravelPagination.php.

    <?php
    class LaravelPagination extends Controller {
    	protected function index()
    	{
          	$per_page=1;
            $data= DB::table('student')->paginate($per_page);
            return View::make('pagination',compact('data'));
    	}
    }?>
  4. Create view file inside app/views/pagination.php

    <table>
    <tr><td>First Name</td>
      <td>Class</td>
    </tr>
    <?php foreach ($data as $rows): ?>
    <tr><td><?php echo $rows->firstName ; ?></td>
    <td><?php echo $rows->class; ?></td>
    </tr>
    </table>
    <?php endforeach; ?>
    <?php echo $data->links() ?>
    <script>
    $( document ).ready(function() {
    $('.pagination a').on('click', function(event) {
    event.preventDefault();
    if ($(this).attr('href') != '#') {
    $('#ajaxContent').load($(this).attr('href'));
    }
    });
    });
    </script>
    
    
  5. Create Controller file inside app/controllers/LaravelAjaxPagination.php.

    <?php
    class LaravelAjaxPagination extends Controller {
      protected function index()
      {
         return View::make('paginationajax');
        
      }
    }?>
    
  6. Create view file inside app/views/paginationajax.php.

    <html>
    <head>
    <title>Laravel ajax pagination example : Tutsway.com</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    </head>
    <body>
    <div id="ajaxContent">
    </div>
    <script src="//cdn.jsdelivr.net/jquery/2.1.1/jquery.js"></script>
    <script>
    $( document ).ready(function() {
    var Url = '/laravelpagination';
    $('#ajaxContent').load(Url);
    });
    </script>
    </body>
    </html>
    
  7. Now we have to visit the following Url in our web browser.
  8. http://mylaravel/laravelajaxpagination // here mylaravel is my hostname