ria/app/Views/employeeListing.php

<style>
    #datatable_filter {
        float: inline-end;
    }

    #datatable_wrapper .row .col-sm-4 {
        flex-basis: 50%;
        float: inline-end;
    }

    #datatable_paginate .pagination {
        flex-basis: 50%;
        float: inline-end;
        margin: 0 0 15px;
    }

    #datatable_wrapper .row:nth-child(3),
    #datatable_wrapper .row:nth-child(1) {
        padding: 0 15px;
    }

    #datatable_info {
        margin-top: 5px;
    }

    .dataTables_wrapper {
        padding-bottom: 0;
    }

    .Date-filter-form {
        display: flex;
        align-items: center;
        gap: 10px;
        /* Adjust the gap as needed */
    }

    .Date-filter-form input,
    .Date-filter-form button {
        padding: 5px;
        font-size: 14px;
    }

    .Date-filter-form button {
        background-color: #007bff;
        color: white;
        border: none;
        cursor: pointer;
    }

    .Date-filter-form button:hover {
        background-color: #0056b3;
    }

    .icon-button {
        background: none;
        border: none;
        cursor: pointer;
        color: #007bff;
        font-size: 18px;
    }

    .icon-button:hover {
        color: #0056b3;
    }
</style>





<div class="content-page">
    <div class="content">
        <!-- Start Content-->
        <div class="container-fluid">
            <!-- start page title -->
            <div>
            <?php
                helper('form');
                $error = session()->getFlashdata('error');
                if ($error) {
                    $type = "error";
                    echo show_alert($type, $error);
                }
                $success = session()->getFlashdata('success');
                if ($success) {
                    $type = "success";
                    echo show_alert($type, $success);
                }
                ?>
                <div class="row">
                    <div class="col-12">
                        <div class="page-title-box page-title-box-alt">
                            <h4 class="page-title">Employee Details</h4>
                            <a class="btn btn-success" href="<?php echo base_url(); ?>addemployee">Add New Employee</a>                                                                             
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                        
                            <div class="card-body">
                              
                            <table id="datatable" class="table table-hover table-bordered" style="background-color:#fff;">
                            <thead>
                                <tr>
                                    <th >Emp ID</th>
                                    <th>Employee Name</th>
                                    <th>Contact Number</th>
                                    <th>Designation</th>
                                    <th>Department</th>
                                    <th>Active</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php
                                if (!empty($userRecords)) {
                                    foreach ($userRecords as $record) {
                                ?>
                                        <tr>
                                            <?php if (date('d-m-Y', strtotime($record->Created_date)) == "30-11--0001") {
                                                $cdate =  '00-00-0000';
                                            } else {
                                                $cdate =  date('d-m-Y', strtotime($record->Created_date));
                                            } ?>
                                            <td><u><a class="a_tag_link" href="<?php echo base_url() . 'employeedetails/ViewEmployee/?EmpID=' . $record->EmpID; ?>" data-toggle="tooltip" title="<?php echo $record->EmpID; ?>  -  Click here to view Employee details"><?php echo $record->EmpID ?> </a></u></td>
                                            <td><?php echo $record->FirstName; ?></td>
                                            <td><?php echo $record->ContactNumber ?></td>
                                            <td><?php echo $record->Designation ?></td>
                                            <td><?php echo $record->DepartmentName ?></td>
                                            <td><?php echo ($record->IsActive == 1) ? ' Active ' : ' In Active '; ?></td>
                                        </tr>
                                <?php
                                    }
                                }
                                ?>
                                
                            </tbody>
                        </table>
                            </div> <!-- end card body-->
                        </div> <!-- end card -->
                    </div><!-- end col-->
                </div>
            </div>
        </div> <!-- container -->
    </div> <!-- content -->
</div>

<script type="text/javascript" src="<?php echo base_url(); ?>public/assets/js/common.js" charset="utf-8"></script>
<!-- <script type="text/javascript">
   
	$(function () {
   
    $('#datatable').DataTable({
      "paging": true,
      "lengthChange": true,
      "searching": true,
      "ordering": true,
      "info": true,                
      "autoWidth": true,          
      "pageLength": 10,            
      "lengthMenu": [10, 25, 50, 100]  
	   
    }); 
  });
	
</script> -->
<script>
    $(document).ready(function() {
        $.fn.dataTable.ext.type.order['date-eu-pre'] = function(date) {
            var dateSplit = date.split('-');
            return (dateSplit[2] + dateSplit[1] + dateSplit[0]) * 1;
        };
        // Initialize the DataTable
        
        var table = $('#datatable').DataTable({
            dom: 'Blfrtip', // Buttons, length menu, filter, table, information, pagination
            buttons: [
                'copy', 'csv', 'excel', 'pdf', 'print' // Export buttons
            ],
            pageLength: 10, // Default rows per page
            lengthMenu: [ [10, 20, 30, 50, -1], [10, 20, 30, 50, "All"] ], // Rows per page options
            // responsive: true, // Responsive table
            order: [], // Default ordering (column index 0, descending)
            language: {
                paginate: {
                    next: '<i class="fas fa-angle-right"></i>', // Next button icon
                    previous: '<i class="fas fa-angle-left"></i>' // Previous button icon
                }
            }
        });

        // Initialize the datepickers
        $("#fromDate").datepicker({
            dateFormat: 'dd-mm-yy',
            onSelect: function(selectedDate) {
                var minDate = $(this).datepicker("getDate");
                $("#toDate").datepicker("option", "minDate", minDate);
            }
        });

        $("#toDate").datepicker({
            dateFormat: 'dd-mm-yy',
            onSelect: function(selectedDate) {
                var maxDate = $(this).datepicker("getDate");
                $("#fromDate").datepicker("option", "maxDate", maxDate);
            }
        });

        // Reset button functionality
        $("#resetButton").click(function() {
            $("#fromDate").datepicker("setDate", null);
            $("#toDate").datepicker("setDate", null);
            $("#toDate").datepicker("option", "minDate", null);
            $("#fromDate").datepicker("option", "maxDate", null);
            table.draw();
        });

        // Date range filter
        $.fn.dataTable.ext.search.push(

            function(settings, data, dataIndex) {
                var fromDate = $("#fromDate").datepicker("getDate");
                var toDate = $("#toDate").datepicker("getDate");

                var dateStr = data[0]; // Assuming the date is in the first column

                // Convert dateStr to Date object
                var dateParts = dateStr.split("-");
                var date = new Date(dateParts[2], dateParts[1] - 1, dateParts[0]); // Convert dd-mm-yyyy to Date object

                if (!fromDate || !toDate) {
                    return true; // No filter if dates are not selected
                }

                return date >= fromDate && date <= toDate;
            }
        );

        // Handle form submission
        $("#DateRangeFilter").submit(function(e) {
            e.preventDefault();
            table.draw();
        });
    });
</script>