DataTableFilters

index.blade.php

@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