I have a table on page where I am able to fetch the data from database and load that into table.. now I want to create apply filter option on same page and data in table should be filtered account to applied filters. I am new to Laravel and PHP so have tried multiple options to filter found options that it can be done using ajax, jquery tried that too but no luck. Here is my sample blade template where I am able get distinct values from a colum and load that in dropdown but what I want to do is on click of Apply button data under table should be updated according to filters.
@section('content')
<div class="content">
<div class="row">
<div class="col">
<div class="form-group">
<label>Business Unit</label>
<div class="select2-purple">
<select class=" multiple="multiple" data-placeholder="Business Unit" data-dropdown-css-class="select2-purple" name="Business_unit" id="Business_unit" style="width: 100%;">
@foreach($Business_unit as $bu)
<option> {{ $bu->Business_Unit }} </option>
@endforeach
</select>
</div>
</div>
</div>
<div class="col">
<div class="form-group">
<label>Org Level 1</label>
<div class="select2-purple">
<select class=" multiple="multiple" data-placeholder="Org Level 1" data-dropdown-css-class="select2-purple" name="Orglevel1" id="Orglevel1" style="width: 100%;">
@foreach($Org_level1 as $org1)
<option> {{ $org1->Orglevel1 }} </option>
@endforeach
</select>
</div>
</div>
</div>
<div class="col">
<div class="form-group">
<label>Org Level 2</label>
<div class="select2-purple">
<select class=" multiple="multiple" data-placeholder="Org Level 2" data-dropdown-css-class="select2-purple" style="width: 100%;">
@foreach($Org_level2 as $org2)
<option> {{ $org2->Orglevel2 }} </option>
@endforeach
</select>
</div>
</div>
</div>
<div class="col">
<div class="form-group">
<label>Region</label>
<div class="select2-purple">
<select class=" multiple="multiple" data-placeholder="Region" data-dropdown-css-class="select2-purple" style="width: 100%;">
@foreach($Region_select as $reg)
<option> {{ $reg->Region }} </option>
@endforeach
</select>
</div>
</div>
</div>
<div class="col">
<button class="btn btn-primary rounded" type="submit" id="search" name="search">Apply</button>
</div>
</div>
<div class="card">
<div class="card-header">
<h3 class="card-title"><b>Employees at High Attrition Risk</b></h3>
</div>
<div class="card-body p-0">
<table class="table table-bordered table-striped" style="font-size:small;" id="example2">
<thead>
<tr>
<th style="width: 10%">
Employee ID
</th>
<th style="width: 10%">
Role
</th>
<th style="width: 10%">
Region
</th>
<th style="width: 12%">
Org Level1
</th>
<th style="width: 12%">
Org Level2
</th>
<th>
Risk Level
</th>
<th>
Performance
</th>
<th style="width: 10%">
</th>
</tr>
</thead>
@foreach($Memberdetails_list as $d)
<tr>
<td>
<a href="/Memberdetails/{{ $d->id }}">{{ $d->membersid }}</a>
</td>
<td>
{{ $d->Role}}
</td>
<td>
{{ $d->Region}}
</td>
<td>
{{ $d->Orglevel1}}
</td>
<td>
{{ $d->Orglevel2}}
</td>
<td>Here is my Memeberdetails Controller which is a resource controller
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Memberdetails;
use App\Models\Attrition_correlators;
class MemberdetailController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function __construct()
{
$this->middleware('auth');
}
public function index()
{
$Memberdetails= new Memberdetails;
$Memberdetails_list= $Memberdetails::all();
$Business_unit = Memberdetails::distinct('Business_Unit')->get(['Business_Unit']);
$Org_level1 = Memberdetails::distinct('Orglevel1')->get(['Orglevel1']);
$Org_level2 = Memberdetails::distinct('Orglevel2')->get(['Orglevel2']);
$Region_select = Memberdetails::distinct('Region')->get(['Region']);
return view('admin.members.Datapoints',compact('Memberdetails_list','Business_unit','Org_level1','Org_level2','Region_select'));
}
/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function create()
{
//
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
//
}
/**
* Display the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function show(Memberdetails $Memberdetail)
{
$Attrition_correlator = Attrition_correlators::all();
return view('admin.members.Detailspage',compact('Memberdetail','Attrition_correlator'));
}
/**
* Show the form for editing the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function edit($id)
{
//
}
/**
* Update the specified resource in storage.
*
* @param \Illuminate\Http\Request $request
* @param int $id
* @return \Illuminate\Http\Response
*/
public function update(Request $request, $id)
{
//
}
/**
* Remove the specified resource from storage.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function destroy($id)
{
//
}
}And this is my web.php
Route::resource('/Memberdetails', MemberdetailController::class);And below is my migration
public function up()
{
Schema::create('memberdetails', function (Blueprint $table) {
$table->id();
$table->string('membersid');
$table->string('Role');
$table->string('Orglevel1');
$table->string('Orglevel2');
$table->string('Region');
$table->string('Professional_clas');
$table->string('Performance');
$table->string('Probablity');
$table->string('Riskzone');
$table->string('Manager');
$table->string('Topcorrelators');
$table->string('Local_Expat');
$table->string('Role_Seniority');
$table->string('HR_Region');
$table->string('Gender');
$table->string('Marital_Status');
$table->string('Business_Unit');
$table->string('Total_Working_years');
$table->timestamps();
});
}I want to know what I can do to get the filters working and how can I can Orgleve1 and Orgleve2 cascading on Business Unit..meaning when I select business unit relevant Org leve1 and Orglevel2 Should be populated in dropdown and filter should. Any help will really help me out Thanks in Advance!