Laravel Active Inactive Ajax Filter Example With Pagination

Hello artisan in this brand new tutorial i am going to show you step by step that how we can create laravel ajax filter system with pagination. From this tutorial you will learn basically the filter system with pagination.

In this tutorial firstly i will show users data then create pagination of those data. Then secondly i will create a active in active ajax filter system with pagination using ajax request. After learning that you will be able to do advanced ajax product filters in laravel with pagination like task.

Sometimes we need to create a filter system without page refresh. We can do it but pagination with ajax filter is little bit tough. So i am here to guide you that how can you create a filter with pagination system in Laravel using ajax request.

See the preview of this tutorial that what i am going to do. I will show you there image with there condition of filter.

Preview: showing data with ajax pagination:

Preview: showing active filter data with ajax pagination:

Preview: showing inactive filter data with ajax pagination:

Step 1 : Install Laravel 8

We are going from scratch to create laravel filter example with pagination, So we require to get fresh Laravel 8 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 second step we have to create migration for users table using Laravel 8. As i am going to use User model, so need to create model, just update migration file like below:

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

class CreateUsersTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('users', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('email')->unique();
            $table->timestamp('email_verified_at')->nullable();
            $table->string('password');
            $table->boolean('status')->default(false);
            $table->rememberToken();
            $table->timestamps();
        });
    }

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

Then after, simply run migration:

php artisan migrate

Step 3: Create Route

Read also: Laravel Vue Js Search Example with Pagination

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

routes/web.php

use Illuminate\Support\Facades\Route;

Route::get('/', 'FilterController@index')->name('filter.example');

Step 4: Create Controller

In this step we need to create our controller method to filter and listing our data in blde file. So create controller and update like below:

app/Http/Controllers/FilterController.php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\User;

class FilterController extends Controller
{
    public function index(User $user, Request $request)
    {   
        
        if($request->ajax() && $request->status != null)
        {
            return view('child', [
                'users' => $user->where('status',$request->status)->simplePaginate(5)
            ])->render();
        }

        if($request->ajax())
        {
            return view('child', [
                'users' => $user->simplePaginate(5)
            ])->render();
        }
 
        return view('welcome',[
            'users' => $user->simplePaginate(5)
        ]);
    }
}

Step 5: Create Blade Files

We have to create two blade file one is welcome.blade.php and another is child.blade.php. So create it.

resources/views/welcome.blade.php

And update the child blade like below:

resources/views/child.blade.php

Make sure you have some dummy data on your users table before run this example. Now we are ready to run our example so run bellow command to test laravel ajax filter example with pagination:

Now you can open bellow URL on your browser:

Read also: Laravel 8.x Ajax Pagination with Next And Previous Button

Hope it can help you.