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">
                        <div class="page-title-right">
                                <ol class="breadcrumb m-0">
                                    <li class="breadcrumb-item"><a href="javascript: void(0);">HR</a></li>
                                    <li class="breadcrumb-item active">
                                    <h4 class="page-title">Employee Details</h4>
                                    </li>
                                </ol>
                            </div>
                            
                            <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" style="overflow-x:scroll;">
                              
                            <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><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>
    $(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: [
                'excel', 'pdf'
            ],
            pageLength: 10, 
            lengthMenu: [ [10, 20, 30, 50, -1], [10, 20, 30, 50, "All"] ], // Rows per page options
            responsive: false,
            order: false,
            language: {
                paginate: {
                    next: '<i class="fas fa-angle-right"></i>', // Next button icon
                    previous: '<i class="fas fa-angle-left"></i>' // Previous button icon
                }
            }
        });


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