Pages

10 March, 2023

Date Range Fillter Datatable Jquery Php

<div class="date-filter12">
                <div class="row">
                    <div class="col-md-12">
                        <h4 class="text text-primary">Search By Date:</h4>
                    </div>
                    <div class="col-md-2">
                        <label>From Date:</label>
                        <input type="text" id="min" name="min" class="form-control">
                    </div>
                    <div class="col-md-2">
                        <label>To Date:</label>
                        <input type="text" id="max" name="max" class="form-control">
                    </div>
                </div>
            </div>


Data Table start here : id is very important check id okay

                    <table id="example" class="display" style="width:100%">
                        <thead class="table-light">
                          <tr>
                             <th>Referenc#</th>
                             <th>Pick Date</th>
                             <th>Origin</th>
                             <th>Drop</th>
                             <th>Truck</th>
                             <th>Load Type</th>
                             <th>Broker</th>
                             <th>Status</th>
                             <th>Date</th>
                             <th>Action</th>
                          </tr>
                        </thead>
                        <tbody id="lodetypeerStatus">
                        @php $i=1;
                        @endphp
                            @foreach($userdata as $loads_data)
                                <?php
                                    // $shipment_res = App\Models\Load::where('user_id',$loads_data['user_id'])->orderBy('id','desc')->get();
                                    //  dd($shipment_res);
                                    $shipment_res = App\Models\Load::where([['user_id',$loads_data['user_id']],['load_status', '=', '0'] ])->orderBy('id','desc')->get();
                                ?>
                                @foreach($shipment_res as $user_load)
                                    <tr class="odd">
                                        <td class="copy-text">{{ $user_load->ref_no }}</td>
                                        <td class="copy-text">{{ $user_load->post_date }}</td>
                                        <td class="copy-text">{{ $user_load->load_state_origin }}</td>
                                        <td class="copy-text">{{ $user_load->load_city_desti }}</td>
                                        <td class="copy-text">{{ $user_load->equipments }}</td>
                                        <td class="copy-text">{{ $user_load->full_partial_tl_ltl }}</td>
                                            @php
                                                $user =  App\Models\User::where('id',$user_load['user_id'])->first();
                                                $name= isset($user['name']) ? $user['name'] : null;
                                            @endphp
                                        <td>{{ucfirst($name)}}</td>
                                            <?php
                                                $status= $user_load->load_status;
                                                $date_pick= explode("T",$user_load->dat_pick_date);
                                                $date_pick1= strtotime($date_pick['0']);
                                                $today= strtotime(date('Y-m-d'));
                                                $lstatus= '';
                                                if($today > $date_pick1){
                                                    $lstatus = 'Expire';
                                                }else{
                                                    if($status == 1){
                                                            $lstatus = 'Delete';
                                                    }else{
                                                        $lstatus = 'Active';
                                                    }
                                                }
                                            ?>
                                        <td>{{ $lstatus }}</td>
                                        <!--<td>{{ date('d M, Y', strtotime($user_load->created_at) )}}</td>-->
                                        {{-- <td>{{ date('Y-m-d', strtotime($user_load->created_at) )}}</td> --}}

                                        <td>{{ date('m/d/Y', strtotime($user_load->created_at) )}}</td>

                                        <td style="width: 80px;" class="action_tooltip classToInclude"  >
                                            <input type="hidden" value="{{ $user_load->load_dat_id }}" id="load_dat_id">
                                           
                                            <button type="button" class="btn btn-outline-secondary btn-sm radius-30 px-4" id="load_update_form_btn"><i class="bx bx-edit"></i><span class="tooltip">Edit</span></button>
                                           
                                           
                                            <button type="button" class="btn btn-outline-danger btn-sm radius-30 px-4" id="load_delete_btn" ><i class="bx bx-trash"></i><span class="tooltip">Delete</span></button>
                                           
                                           
                                           
                                           
                                        </td>
                                    </tr>
                           
                                @endforeach
                            @endforeach
                        </tbody>
                        <tfoot>
                            <tr>
                                <th>Referenc#</th>
                                <th>Pick Date</th>
                                <th>Origin</th>
                                <th>Drop</th>
                                <th>Truck</th>
                                <th>Load Type</th>
                                <th>Broker</th>
                                <th>Status</th>
                                <th>Date</th>
                                <th>Action</th>
                             </tr>
                        </tfoot>
                    </table>

    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.3/css/jquery.dataTables.min.css">

<link rel="stylesheet" href="https://cdn.datatables.net/datetime/1.3.1/css/dataTables.dateTime.min.css">

 <script>

Note: *** 8 is number of date column 0 to 8 means 9 number column.

var startDate = new Date(data[8]);

endnote

    $(document).ready(function () {
            $.fn.dataTable.ext.search.push(
                function (settings, data, dataIndex) {
                    var min = $('#min').datepicker('getDate');
                    var max = $('#max').datepicker('getDate');
                    var startDate = new Date(data[8]);
                    if (min == null && max == null) return true;
                    if (min == null && startDate <= max) return true;
                    if (max == null && startDate >= min) return true;
                    if (startDate <= max && startDate >= min) return true;
                    return false;
                }
            );
       
            $('#min').datepicker();
            $('#max').datepicker();
            var table = $('#example').DataTable();
       
            // Event listener to the two range filtering inputs to redraw on input
            $('#min, #max').change(function () {
                table.draw();
            });
        });
</script>

No comments:

Post a Comment

Thanks