Laravel 8.x Ajax Pagination With Next And Previous Button

If you want to make jquery ajax pagination in laravel 8 on with Next and Previous Button Link, then this tutorial is for you. In this post, you can learn How to make pagination only with Next and Previous Button Link in Laravel using ajax. Here we will create customize next and previous pagination link in Laravel 8 framework using Ajax.

In this tutorial, I would like to show you how to create jquery ajax pagination in laravel 8. we will create a step by step simple ajax pagination in laravel 8. We will create laravel pagination without reload data from database.

In this example, we simply create "categories" table using migration command and add some dummy records. After that, we will create one route for display view and write code jquery ajax on blade file. So, you have to just follow below step and you will get simply ajax pagination in laravel 8.

So let's start jquery ajax pagination in laravel 8 tutorial.

Content Preview:

Step 1 : Install Laravel 8

we are going from scratch, So we require to get fresh Laravel 6 application using bellow command, So open your terminal OR command prompt and run bellow command:

composer create-project --prefer-dist laravel/laravel blog

Step 2: Create Table and Model

In this step we have to create migration for items table using Laravel 6  php artisan command, so first fire bellow command:

php artisan make:model Shop -m

After this command you will find one file in following path "database/migrations" and you have to put bellow code in your migration file for create items table.

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateShopsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('shops', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('category_name');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('shops');
    }
}

Then after, simply run migration:

php artisan migrate

Step 3: Create Route

Read also: Multi Step Form Submit in Laravel with Validation

In this is step we need to create routes for items listing. so open your "routes/web.php" file and add following route.

routes/web.php

//Pagination Ajax
Route::get('/pagination', 'PaginationController@index');

Route::post('pagination/fetch', 'PaginationController@fetch')->name('pagination.fetch');

Step 4: Create Controller

In this step, we have to create two view file one for layout and another for data. now we should create new controller as PaginationController in this path "app/Http/Controllers/PaginationController.php". this controller will manage all listing items and item ajax request and return response, so put bellow content in controller file:

app/Http/Controllers/PaginationController.php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use DB;

class PaginationController extends Controller
{
    function index()
    {
     $data = DB::table('shops')->simplePaginate(5);
        return view('pagination_parent', compact('data'));
    }

    function fetch(Request $request)
    {
     if($request->ajax())
     {
      $data = DB::table('shops')->simplePaginate(5);
         return view('pagination_child', compact('data'))->render();
     }
    }
}

Step 5: Create Blade Files

In Last step, let's create pagination_parent.blade.php(resources/views/pagination_parent.blade.php) for layout and lists all items code here and put following code:

resources/views/pagination_parent.blade.php

resources/views/pagination_child.blade.php

@foreach($data as $row)

   {{ $row->category_name }}
        
@endforeach
  
{!! $data->links() !!}

Make sure you have some dummy data on your items table before run this example. Now we are ready to run our example so run bellow command for quick run:

Now you can open bellow URL on your browser:

http://localhost:8000/pagination

Read also: Laravel Vue JS Infinite Scroll Example From Scratch

I hope it can help you.