/home/mip/mip/resources/views/website/page-job-list.blade.php
@extends('website.layouts-inner')
@section('datatablestyle')
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
<style>
#jobstbl_filter{
display: none
}
.btn-datatable{
background-color: #6c0304;
color: #fff!important
}
.btn-datatable:hover {
background-color: #530304;
}
</style>
@stop
@section('page-body')
<div class="inner-header">
<img src="{{ asset('website/images/img-inner-header-apply.jpg') }}" class="img-responsive"/>
</div>
<br>
<section class="inner-page container">
<div class="table-filter-form" style="background-color: #6c0304; padding: 30px 30px 16px 30px;">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control" id="position_search" class="position_search" placeholder="Position">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control" id="location_search" class="location_search" placeholder="Location">
</div>
</div>
</div>
</div>
<br>
<div class="table-responsive">
<table id="jobstbl" class="display jobstbl table-striped table-responsive" cellspacing="0" width="100%">
<thead>
<tr>
<th class="slug">Slug</th>
<th>Position</th>
<th>Country</th>
<th>Date Open</th>
<th>Date Close</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</section>
@stop
@section('datatablescript')
<script src="https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.jobstbl').DataTable({
processing: true,
serverSide: true,
ordering: false,
responsive: true,
ajax: {
url: "{{ route('datatable.getjobs') }}",
type: "POST",
'headers': {
'X-CSRF-TOKEN': '{{ csrf_token() }}'
}
},
columns: [
{data: 'slug', name: 'slug', visible: false},
{data: 'position', name: 'position'},
{data: 'country_name', name: 'country.name'},
{data: 'opening_date', name: 'opening_date'},
{data: 'closing_date', name: 'closing_date', visible: false},
{data: 'status', name: 'status', visible: false},
{data: 'action', name: 'action', orderable: false, searchable: false}
]
});
});
$('#position_search').on('keyup change', function(){
$('#jobstbl').DataTable().columns(1).search($(this).val()).draw();
});
$('#location_search').on('keyup change', function(){
$('#jobstbl').DataTable().columns(2).search($(this).val()).draw();
});
</script>
@stop
@push('scripts')