How to Create Filters in Laravel 11 for Efficient Data Querying

How to Create Filters in Laravel 11 for Efficient Data Querying

Learn how to implement advanced data filtering in Laravel 11 using query scopes, request parameters, and dynamic filtering techniques. This guide covers building flexible filters for models to enhance your application's search functionality.




File: resources/views/user.blade.php

 
<!-- FIlter -->
    <div class="card rounded-0 p-3 mb-3">
        <form id="filter-form" action="{{ route('user') }}" method="GET">
            <div class="row g-3">
                <div class="col-md-4">
                    <input class="form-control" type="text" name="search" placeholder="Search.." value="{{ request('search') }}">
                </div>
                <div class="col-md-3">
                    <input class="form-control" type="date" name="start_date" value="{{ request('start_date') }}">
                </div>
                <div class="col-md-3">
                    <input class="form-control" type="date" name="end_date" value="{{ request('end_date') }}">
                </div>
                <div class="col-md-2 text-center">
                    <input class="btn btn-outline-primary" type="submit" value="Filter">
                    <button type="button" class="btn btn-outline-danger" id="clearFilter">Clear</button>
                </div>
            </div>
        </form>
    </div>


File: resources/views/user.blade.php

"This is a JavaScript file. Include this code in the user.blade.php file."


<script>
    //================ clear filter button ===================
    document.getElementById('clearFilter').addEventListener('click', () => {
        window.location.href = {!! json_encode(route('user')) !!}
    })

    // JavaScript to handle form submission
    document.getElementById('filter-form').addEventListener('submit', function(event) {
        event.preventDefault();

        // Collect form data
        const form = event.target;
        const formData = new FormData(form);

        const queryParams = [];
        formData.forEach((value, key) => {
            if (value.trim() !== '') {
                queryParams.push(`${key}=${encodeURIComponent(value)}`);
            }
        });

        // Construct URL with query parameters
        const actionUrl = form.getAttribute('action');
        const urlWithParams = actionUrl + '?' + queryParams.join('&');

        // Redirect to the constructed URL
        window.location.href = urlWithParams;
    });
</script>


File: app/Http/Controllers/UserController.php


<?php
namespace App\Http\Controllers;

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

class UserController extends Controller
{
    public function index(Request $request)
    {
        $query = User::where('role', 'User');

        // Apply filters
        if ($request->filled('search')) {
            $query->where(function ($q) use ($request) {
                $q->where('users.name', 'like', '%' . $request->search . '%')
                ->orWhere('users.email', 'like', '%' . $request->search . '%')
                ->orWhere('users.phone', 'like', '%' . $request->search . '%');
            });
        }

        // filter by date
        if ($request->filled('start_date') && $request->filled('end_date')) {
            $query->whereBetween('users.created_at', [
                $request->start_date . ' 00:00:00',  
                $request->end_date . ' 23:59:59'    
            ]);
        } elseif ($request->filled('start_date')) {
            $query->whereDate('users.created_at', '>=', $request->start_date);
        } elseif ($request->filled('end_date')) {
            $query->whereDate('users.created_at', '<=', $request->end_date);
        }

        $data['users'] = $query->latest('users.created_at')->paginate();

        return view("user", $data);
   
    }
}


Related Articles
Comments