I have a filter form, and I would like to select a value from the drop down list and filter both the chart and the table at the same time.
Here is what I've tried
Here is the form in the index
<div class="white-box">
<div class="row b-b b-t" style="display: none; background: #fbfbfb;" id="ticket-filters">
<div class="col-md-12">
<h4>@lang('app.filterBy') <a href="javascript:;" class="pull-right toggle-filter"><i class="fa fa-times-circle-o"></i></a></h4>
</div>
<form action="" id="filter-form">
<div class="col-sm-4">
<div class="example">
<h5 class="box-title m-t-30">@lang("app.selectDateRange")</h5>
<div class="input-daterange input-group" id="date-range">
<input type="text" class="form-control" id="start-date" placeholder="@lang('app.startDate')"
value=""/>
<span class="input-group-addon bg-info b-0 text-white">@lang('app.to')</span>
<input type="text" class="form-control" id="end-date" placeholder="@lang('app.endDate')"
value=""/>
</div>
</div>
</div>
<div class="col-sm-4">
<h5 class="box-title m-t-30"> @if($logTimeFor->log_time_for == 'task')
@lang('app.selectTask')
@else
@lang('app.selectProject')
@endif
</h5>
<div class="form-group">
<div class="row">
<div class="col">
@if($logTimeFor->log_time_for == 'task')
<select class="select2 form-control" data-placeholder="@lang('app.selectTask')" id="project_id">
<option value=""></option>
@foreach($tasks as $task)
<option value=""></option>
@endforeach
</select>
@else
<select class="select2 form-control" data-placeholder="@lang('app.selectProject')" id="project_id">
<option value=""></option>
@foreach($projects as $project)
<option value=""></option>
@endforeach
</select>
@endif
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<h5 class="box-title m-t-30">@lang('modules.employees.employeeName')</h5>
<div class="form-group">
<div class="row">
<div class="col-md-12">
<select class="select2 form-control" data-placeholder="@lang('modules.employees.employeeName')" id="employeeId">
<option value=""></option>
@foreach($employees as $employee)
<option
value=""></option>
@endforeach
</select>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<button type="button" class="btn btn-success" id="filter-results"><i class="fa fa-check"></i> @lang("app.apply")
</button>
</div>
</form>
Here is the JavaScript - filter
$('#filter-results').click(function () {
var token = '';
var url = '';
var startDate = $('#start-date').val();
if (startDate == '') {
startDate = null;
}
var endDate = $('#end-date').val();
if (endDate == '') {
endDate = null;
}
var projectID = $('#project_id').val();
var employeeId = $('#employeeId').val();
$.easyAjax({
type: 'POST',
url: url,
data: {_token: token, startDate: startDate, endDate: endDate, projectId: projectID, employeeId: employeeId},
success: function (response) {
if(response.status == 'success')
chartData = $.parseJSON(response.chartData);
$('#morris-bar-chart').html('');
barChart();
}
});
})
$('.toggle-filter').click(function () {
$('#ticket-filters').toggle('slide');
})
$('#apply-filters').click(function () {
loadTable();
});
The filter works great on the Chart but is not filtering the table results. Please let me know if you can see what I'm missing. All the help is much appreciated.
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire