Laravel Pagination Ajax

Laravel Pagination Ajax

  • Admin
  • 22nd Feb, 2018

Creating Ajax based pagination is Laravel 5.6

Ajax: Ajax (Asynchronous JavaScript and XML) is a technique to update a specific part of webpage asynchronously without reloading the page.In this article, we are going to see how to use ajax to create pagination in Laravel.


I am assuming that you have already installed and configured Laravel 5.6 on your server. If not here is a good tutorial for installing and creating CRUD in Laravel.

Step to create Laravel Pagination Ajax

Step1: Configuring our Routes
Step2: Creating our Controller Actions to handle Requests
Step3: Creating our Model
Step4: Creating our Views
Step5: Writing Javascript function to Fetch records using Ajax in Laravel

Configuring our Routes

In add following code in routes/web.php file

Route::get('/paginate', ['uses'=>'PostController@index']);

Check Out Latest Laravel Interview Questions 2018

Creating our Controller

Create a new file and add the following code to it.


namespace App\Http\Controllers;

use App\Post;
use App\Http\Controllers\Controller;

class PostController extends Controller
* Show all of the users for the application.
* @return Response
public function index()
$posts= Post::paginate(10);
// handling ajax requests
if ($request->ajax()) {
            return view('post.ajaxResults', compact('posts'));

return view('post.index', ['posts' => $posts]);

Creating Our Model

Create a new file named post.php in your app folder and add following code to it.


<?php namespace App; 
use Illuminate\Database\Eloquent\Model;
class Post extends Model { 
public $fillable = ['title','description']; 

Creating our Views

In resources/views/posts directory creating following files

  • index.blade.php
  • ajaxResults.blade.php

In resources/views/posts/index.blade.php put follwing code and save it.

<!doctype html>
<html lang="en">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">
    <title>Ajax Pagination in Laravel</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.0.0/cerulean/bootstrap.min.css" rel="stylesheet">
    <div class="container">
        <div class="row">
            <div class="col-sm-9">
                @if ($posts)
                    <section class="data">

            <div class="col-sm-3">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script> 

In resources/views/posts/ajaxResults.blade.php put follwing code and save it.

 <table class="table table-bordered"> 
 <th>Post Title</th>
 @foreach ($posts as $post)
 <td>{{ $post->title }}</td>
 <td>{{ $post->description }}</td>
 {!! $post->render() !!}
Read Best Ajax Interview Questions for Interview

Writing Javascript functions

Creating a new file in resources/views/ named ajaxscripts.blade.php and following code in it.

<script type="text/javascript">

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

        $('.data li').removeClass('active');
        var page_no=$(this).attr('href').split('page=')[1]; 

    function getPosts(page) {
       var uri={{url('paginate')}};
            url :uri+'?page=' + page,  
        }).done(function (data) {
        }).fail(function () {
            alert('Error in Loading Posts.');


Leave A Comment :

Valid name is required.

Valid name is required.

Valid email id is required.

Related Posts

What is  COBOL?
Define Adwords