Friday, 2 June 2023

Laravel custom datatable without any package

     public function index(Request $request)

    {
        try {
            $searchQuery = request('search');
            $perPage = $request->get('perPage', 10);
            $data = JobApplication::where('full_name', 'like', "%$searchQuery%")
                ->latest('id')
                ->paginate($perPage);
                $data->search=$searchQuery;
            return view('admin.job_application.list', ['data' => $data]);
        } catch (\Exception $e) {
            dd($e->getMessage());
            $data = [
                'input_params' => "List Job application",
                'action' => 'Admin list Categories pages',
                'exception' => $e->getMessage()
            ];
            Log::info(json_encode($data));
            abort(500);
        }
    }
                                                                                                                        




@extends('layouts.admin')
@section('content')
    <form method="GET" id="serchApplicationFrm" action="{{ url()->current() }}">
        <input type="hidden" id="serchApplicationFrmInput" name="search" value="{{ request('search') }}">
        <input type="hidden" id="perPageApplicationFrmInput" name="perPage" value="{{request('perPage')}}">
    </form>
    <form method="POST" id="frmJobApplications" name="frmJobApplications" action="change-status">
        <section class="content-header">
            <h1>
                List Job Applications
            </h1>
            <ol class="breadcrumb">
                <li><a href="/administrator/site-settings"><i class="fa fa-dashboard"></i>Dashboard</a></li>
                <li class="active">List Job Applications</li>
            </ol>
        </section>
        <section class="content">
            <div class="row">
                <div class="col-md-12">
                    <div class="box box-primary">
                        <div class="box">
                            <input type="hidden" name="_token" value="{{ csrf_token() }}">
                            <div class="box-header">
                                <div class="col-md-9 col-sm-9">
                                    <p>
                                        @if (count($data) != 0)
                                            <button class="btn btn-danger btn-sm delete-btn" type="button" name="delete"
                                                value="Delete">Delete</button>
                                        @endif
                                        <input type="hidden" name="operationFlag" value="">
                                    </p>
                                </div>
                            </div>
                            <div class="box-body">
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="dataTables_length" id=""><label>Show <select
                                                    name="jobApplicationTable_length" id="jobApplicationTable_length" aria-controls="jobApplicationTable"
                                                    class="form-control input-sm">
                                                    <option value="10" {{request('perPage') =='10' ? 'selected':''}}>10</option>
                                                    <option value="25"  {{request('perPage') =='25' ? 'selected':''}}>25</option>
                                                    <option value="50"  {{request('perPage') =='50' ? 'selected':''}}>50</option>
                                                    <option value="100"  {{request('perPage') =='100' ? 'selected':''}}>100</option>
                                                </select> entries</label></div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="dataTables_filter"><label>Search:<input id="search-inpu" name="search"
                                                    value="{{ request('search') }}" type="search"
                                                    class="form-control input-sm" placeholder=""
                                                    aria-controls="jobApplicationTable"></label>
                                            @if (request('search'))
                                                <button type="button" id="clearSearch" class="clear-search"><span class=""
                                                        >X</span></button>
                                            @endif
                                            {{-- <button id="search-inpu-submit" type="button">Search</button> --}}
                                        </div>
                                    </div>
                                </div>
                               
                                <table id="jobApplicationTable" class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <td><input type="checkbox" id="checkAll" name="chkAll" value="checkbox"
                                                    onClick="JavaScript:CheckAll('frmJobApplications', 'chkAll', 'chk[]');">
                                            </td>
                                            <th>Name</th>
                                            <th>Email</th>
                                            <th>Phone</th>
                                            <th>Applied On</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <?php $i = 1; ?>
                                        <?php $count1 = count($data); ?>
                                        @foreach ($data as $key => $application)
                                            <tr>
                                                <td>
                                                    <div class="i-checks"><label>
                                                            <input type="checkbox" name="chk[]"
                                                                value="{{ $application->id }}" class="text check-input" />
                                                        </label>
                                                    </div>
                                                </td>
                                                <td><a
                                                        href="/administrator/job-application/show/{{ $application->id }}">{{ $application->full_name }}</a>
                                                </td>
                                                <td>{{ $application->email }}</td>
                                                <td>{{ $application->phone }}</td>

                                                <td><?php echo date('d-M-Y', strtotime($application->created_at)); ?></td>
                                            </tr>
                                            <?php $i++; ?>
                                        @endforeach
                                    </tbody>

                                </table>
                                @php
                                    $total = $data->total();
                                    $currentPage = $data->currentPage();
                                    $perPage = $data->perPage();
                                   
                                    $from = ($currentPage - 1) * $perPage + 1;
                                    $to = min($currentPage * $perPage, $total);
                                @endphp
                                <h5>Showing {{ $from }} to {{ $to }} of {{ $total }} entries
                                </h5>
                                {{ $data->appends(['search' => $data->search, 'perPage' => $data->perPage()])->links('pagination.custom') }}
                                {{-- {{ $data->links('pagination.custom') }} --}}

                            </div>
                            <!-- /.box-body -->
                        </div>

                    </div>
                </div>
            </div>
        </section>
    </form>
    @push('scripts')
        <script type="text/javascript" src="{{ asset('/js/setCommon.js') }}"></script>
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
        <script>
            $("#checkAll").change(function() {
                $("input:checkbox").prop('checked', $(this).prop("checked"));
            });
            $(document).on('click', '.delete-btn', function() {
                var checkboxValues = [];
                var checkedBoxes = $('.check-input:checked');

                $.each(checkedBoxes, function(index, checkBox) {
                    checkboxValues.push($(checkBox).val());
                });
                Swal.fire({
                    title: 'Are you sure?',
                    text: "You won't be able to revert this!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes, delete it!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: "/administrator/job-application/delete",
                            type: "post",
                            data: {
                                "_token": "{{ csrf_token() }}",
                                'checkboxValues': checkboxValues
                            },
                            dataType: "json",
                            success: function(data) {
                                const Toast = Swal.mixin({
                                    toast: true,
                                    position: 'top-end',
                                    showConfirmButton: false,
                                    timer: 3000,
                                    timerProgressBar: true,
                                    didOpen: (toast) => {
                                        toast.addEventListener('mouseenter', Swal
                                            .stopTimer)
                                        toast.addEventListener('mouseleave', Swal
                                            .resumeTimer)
                                    }
                                })

                                Toast.fire({
                                    icon: 'success',
                                    title: "Deleted Successfully..."
                                })
                                setTimeout(() => {
                                    window.location.reload();
                                }, 500);
                                // alert();
                            }
                        });
                    }
                });

            });
        </script>
        <script src="{{ asset('plugins/datatables/jquery.dataTables.min.js') }}"></script>
        <script src="{{ asset('plugins/datatables/dataTables.bootstrap.min.js') }}"></script>

        <script>
           


            $(document).on('keyup', '#search-inpu', function() {
                $("#serchApplicationFrmInput").val($('#search-inpu').val());
            });

            $(document).on('change','#jobApplicationTable_length',function(){
               
                $('#perPageApplicationFrmInput').val($(this).val());
                $('#serchApplicationFrm').submit();
            });

            $(document).on('click', '#search-inpu-submit', function() {
                $("#serchApplicationFrm").submit();
            });
            document.onkeydown = function() {
                if (window.event.keyCode == '13') {
                    document.getElementById('serchApplicationFrm').submit();
                }
            }
            const form = document.getElementById('frmJobApplications');
            form.addEventListener('keypress', function(e) {
                if (e.keyCode === 13) {
                    e.preventDefault();
                }
            });
            $('#clearSearch').click(function() {
                $('#searchInput').val('');
                $('#serchApplicationFrmInput').val('');
                $(this).hide();
                $('#serchApplicationFrm').submit();
            });
        </script>
    @endpush
@endsection

No comments:

Post a Comment

Laravel Export data to csv

 use Illuminate\Http\Response; // Define a function to export data to CSV function exportToCSV($exportData, $columns) {     $filename = ...