Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
DataTableFilters
@extends('theme.limitless4.app')
@section('head')
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
<style>
td:not(:first-child) {
text-align: center;
}
td:nth-child(6) {
text-align: right;
}
div.dataTables_wrapper div.dataTables_length select {
width: 100% !important;
}
.dataTables_processing {
background: #2a3140 !important;
color: #fff !important;
}
</style>
@endsection
@section('sidebar')
@include('backend.'.auth()->user()->path().'.sidebar')
@endsection
@section('content')
<div class="content-wrapper">
<div class="content">
@yield('success-error')
<div class="page-header page-header-light mb-4" style="border: 1px solid #ddd;">
<div class="page-header-content header-elements-inline">
<div class="page-title">
<h5>
<i class="icon-list-unordered mr-2"></i>
<span class="font-weight-bold">Payment Collection</span>
</h5>
</div>
</div>
</div>
<div class="card card-body">
<div class="row py-2">
<div class="col-3">
<input type="text" id="search" name="search" class="form-control" placeholder="Search">
</div>
<div class="offset-6 col-3">
<div class="dropdown float-right">
<a href="#" class="dropdown-toggle" data-target="#filter" data-toggle="collapse" aria-expanded="false">
<i class="icon-filter4 icon-2x"></i>
</a>
<div id="filter" class="dropdown-menu dropdown-menu-right" style="width:340px">
<div class="card-body">
<div class="form-group row">
<div class="col-12">
<label>Date Filter</label>
</div>
<div class="col-6">
<input type="date" id="start_date" class="form-control" value="{{now()->format('Y-m-01')}}">
<small>Start Date</small>
</div>
<div class="col-6">
<input type="date" id="end_date" class="form-control" value="{{now()->format('Y-m-d')}}">
<small>End Date</small>
</div>
</div>
<div class="form-group mb-0">
<div class="my-2 d-flex justify-content-end align-items-center">
<a href="#" class="text-danger font-weight-bold mx-2" data-target="#filter" data-toggle="collapse" aria-expanded="false">close</a>
<button id="btn-apply-filter" class="btn btn-sm btn-primary">Apply Filter</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="table-responsive">
<table class="table datatable-basic table-sm table-custom-sm table-striped table-hover"
style="width:100%">
<thead>
<tr>
<th class="font-weight-bold text-right">Updated At</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
{{-- @include('categories.job.modal.delete')
@include('categories.job.modal.edit') --}}
@endsection
@section('scripts')
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script>
var table = $('.datatable-basic').DataTable({
searching: false,
paging: false,
"drawCallback": function (settings) {
$('.dataTables_processing').css({
'display': 'none !important'
});
},
"processing": true,
"order": [
[0, "desc"]
],
serverSide: true,
ajax: {
'url': "{{ url('api/payment-collection') }}",
'data': function (data) {
var start_date = $('#start_date').val();
var end_date = $('#end_date').val();
var search = $('#search').val();
data.search = search;
data.start_date = start_date;
data.end_date = end_date;
}
},
columns: [
{
data: 'updated_at'
}
]
});
$('#search').keyup(function () {
table.draw();
});
$('#btn-apply-filter').click(function () {
table.draw();
$('#filter').collapse('hide');
});
</script>
@endsection
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.