ria/app/Views/factoryMachineMasterDetails.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"> <?= trim(explode(":", $pageTitle)[1]) ?>  </h4>
                            <a class="btn btn-success" href="<?php echo base_url(); ?>loadView_createFactoryMachineMasterDetail">Add New Factory Machine</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 style="text-align:center !important;">Machine Name</th>
                                    <th style="text-align:center !important;">Machine Type</th>
                                    <th style="text-align:center !important;">Energy Type</th>
                                    <th style="text-align:center !important;">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php
                                
                                if (!empty($masterData)) {
                                    
                                    foreach ($masterData as $record) {
                                ?>
                                            <td align="center"><?php echo $record['machine_name']; ?></td>
                                            <td align="center"><?php echo $record['machine_type'] ?></td>
                                            <td align="center"><?php echo $record['energy_type'] ?></td>
                                            <td align="center">
                                                <a data-toggle="tooltip" 
                                               href="<?php echo base_url(); ?>loadView_updateFactoryMachineMasterDetail?id=<?php echo $record['id'] ?>"
                                                ><i class="fa fa-pencil-alt" data-toggle="tooltip" 
                                                title="-  Click here to Edit "></i>
                                                                &nbsp;&nbsp;&nbsp;
                                                </a>
                                            </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
                }
            }
        });


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