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
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.
#laravel #laravel-8x #pagination #example