I am using Laravel 5.4 in my project and I'm making a simple dashboard with some charts that desplay informations from mySql database.
I put some dropdown lists as filters so that the user can filter the dashboard as he like to. I put the dropdown lists in a form and i filled them from my controller without ajax, simply using get method and bootstrap-select.
This is my code how looks like:
<form id="filter" method="GET">
{{ csrf_field() }}
<select class="selectpicker " name="siteF" id="siteF" data-width="100px" data-actions-box="true" data-style="btn-warning" title="Site">
<option>All</option>
@foreach($SiteFilter as $site)
<option>{{ $site->site_name }}</option>
@endforeach
</select>
<select class="selectpicker " name="yearF" id="yearF" data-size="5" data-width="100px" data-actions-box="true" data-style="btn-warning" title="Year">
<option>All</option>
@foreach($YearFilter as $year)
<option>{{ $year->year }}</option>
@endforeach
</select>
<select class="selectpicker " name="operatorF" id="operatorF" data-size="5" data-width="100px" data-actions-box="true" data-style="btn-warning" title="Operator">
<option>All</option>
@foreach($OperatorFilter as $operator)
<option>{{ $operator->operator }}</option>
@endforeach
</select>
<select class="selectpicker " name="parkingF" id="parkingF" data-width="100px" data-actions-box="true" data-style="btn-warning" title="Parking">
<option>All</option>
@foreach($ParkingFilter as $parking)
<option>{{ $parking->parking }}</option>
@endforeach
</select>
<button type="submit" class="btn bg-deep-orange waves-effect">
<i class="material-icons">search</i>
</button>
</form>
This is the part in the controller where i fill the lists:
//----------------------------------- 1/ filter of sites-----------------------------------
$SiteFilter= DB::table('transactions')
->select('site_name')
->distinct()
->get();
//-----------------------------------end of filter of sites-----------------------------------
//----------------------------------- 2/ filter of years-----------------------------------
$YearFilter= DB::table('transactions')
->select(DB::raw("YEAR(transaction_created_at) as year"))
->distinct()
->get();
//-----------------------------------end of filter of years-----------------------------------
//----------------------------------- 3/ filter of operators-----------------------------------
$OperatorFilter= DB::table('transactions')
->select('operator_id as operator')
->distinct()
->get();
//-----------------------------------end of filter of operators-----------------------------------
//----------------------------------- 4/ filter of parkings-----------------------------------
$ParkingFilter= DB::table('transactions')
->select('parking')
->distinct()
->get();
//-----------------------------------end of filter of parkings-----------------------------------
and this is an example of a chart:
//-----------------------------------Donutchart: number of transactions per operator-----------------------------------
$donutData= DB::table('transactions')
->select('operator_id as operator',DB::raw('count(id) as num'))
->where(function ($query) {
if((Input::get('operatorF') != "")&&(Input::get('operatorF') != "All"))
$query->where('operator_id','=',Input::get('operatorF') );
if((Input::get('parkingF') != "")&&(Input::get('parkingF') != "All"))
$query->where('parking','=',Input::get('parkingF') );
if((Input::get('yearF') != "")&&(Input::get('yearF') != "All"))
$query->where('transaction_created_at', '>=',(string)Input::get('yearF'));
if((Input::get('siteF') != "")&&(Input::get('siteF') != "All"))
$query->where('site_name','=',Input::get('siteF') );
})
->groupby('operator')
->orderby('operator')
->get();
$donut_data='[';
foreach($donutData as $rec)
{
$donut_data=$donut_data.'{"label":'.$rec->operator.',"value":'.$rec->num.'},';
}
$x=strlen($donut_data);
$donut_data[$x-1]=']';
//-----------------------------------end of Donutchart: number of transactions per operator-----------------------------------
The response returned with this code is sent to javascript to make the donut chart.
So my quetion is what should i do to use the filters without refreshing my dashboard page in fact in the currant state when the page is reloaded i loose the dropdown filters last choice so i the user can't tell which filter and value he used. And i didn't know how to implement the ajax in my project. Any help?
Thank you in advance..