CODEWITHSUNDEEP
javascriptjquerylaravellaravel-8
Pamungkas
Pamungkas

Reputation: 15

How to filter data without page refresh in Laravel?

I want to filter data without refreshing the page.

View

@extends('layout.layouts')
@section('content')
    <br>
    <h2 class="text-center">SALES</h2>
    <hr>
    <div class="card text-dark">
        <div class="card-body">
            <form method="get" action="/filter">
                <div class="form-group row">
                    <div class="col-sm-2">
                        <select id="brand" name="brand" class="form-control" required>
                            <option value="0">All Brand</option>
                            @foreach($brand as $brand)
                                <option value="{{ $brand->id }}">{{ $brand->name_brand}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-sm-2">
                        <select id="year" name="year" class="form-control">
                            <option value="0">Year</option>
                            @foreach($year as $year)
                                <option value="{{ $year->year }}">{{ $year->year}}</option>
                            @endforeach
                        </select>
                    </div>
                    <button type="submit" class="btn btn-primary">Filter</button>
                </div>
                <div class="row ">
                    <div class="col">
                        <div class="card text-dark bg-light mb-6">
                            <div class="card-header">SALES</div>
                            <div class="card-body">
                                <canvas id="myLineChart" width="400" height="100"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
                <hr>
                <table id="table" class="table table-bordered table-hover table-striped" data-toggle="table">
                    <thead>
                    <tr>
                        <th data-order='desc' data-sortable="true">No</th>
                        <th data-order='desc' data-sortable="true">Period</th>
                        <th data-order='desc' data-sortable="true">Total Sales</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach($data as $d)
                        <tr>
                            <td>{{++$i}}</td>
                            <td>{{ $d->period }}</td>
                            <td>{{ $d->total }}</td>
                        </tr>
                    @endforeach
                    </tbody>

                </table>
        </div>
    </div>
@endsection

Controller

 public function filter(Request $request){

    // my controller code it's very long, so I give the return only

    return view('filter', compact('brand', 'year', 'data'))->with('i');
 }

Route

Route::get('/filter', [HomeController::class, 'filter']);

Result enter image description here

The filter function is actually running, but I want to do the filter without refreshing the page. So after the button filter, click/submit the new/filtered data in the chart, and table immediately appears without refresh. I try some tutorial but doesn't work.

Upvotes: 0

Views: 1814

Answers (2)

WillianBabuu
WillianBabuu

Reputation: 437

Laravel is A PHP framework, PHP framework, PHP request data from server and return to client in which it must refresh the page. To archive interchange of data you have few option.

option one use jquery ajax, it works well and fine with laravel and bootsrtap. Get started here on offical website

option two (recommended by me) use laravel Livewire. It is simple and easy, it is plain PHP and uses the same laravel functions. get started here on offical website

option three use VueJs. You can plugin vuejs in your laravel application. vue components can be used inside laravel blades, this maybe hard if you have little difficult of you have little experience with JavaScript frameworks. yuo can read more in laravel docs

Upvotes: 1

Ramanath
Ramanath

Reputation: 530

Make an AJAX call to the specific endpoint and update the DOM accordingly.

Upvotes: 2

Related Questions