ria/app/Views/costListing.php

 <div class="content-wrapper">
   <section class="content">
     <div class="box">
       <div class="box-header">
         <CENTER>
           <h3 class="box-title"> Cost Details</h3>
         </CENTER>
       </div>
       <div class="container-fluid">
         <div class="row">
           <div class="col-xs-12 text-right">
             <div class="form-group">
               <a data-toggle="modal" href="#ccwizard" data-id="0" data-name="" class="btn btn-success">Add New Cost List</a>
               <a class="btn btn-success" href="<?php echo base_url(); ?>exportcost">Export Cost Details <i class="fa fa-download" aira-hidden="true"></i></a>
             </div>
           </div>
         </div>
         <div class="row">
           <div class="col-xs-12">
             <table id="datatable" class="table table-bordered table-hover" style="background-color:#fff;font-size:12px;">
               <thead style="background-color: #ddd;">
                 <tr>
                   <th style="display:none;"></th>
                   <th>Create Date</th>
                   <th>Create Time</th>
                   <th>Cost Center Code</th>
                   <th>Cost Center Name</th>
                   <th>Created By</th>
                   <th>Active</th>
                   <th>Action</th>
                 </tr>
               </thead>
               <tbody>
                 <?php
                  if (!empty($userRecords)) {
                    foreach ($userRecords as $record) {

                    
                      $createdat = new DateTime($record->CreatedDate);
                      $date = $createdat->format('d-m-Y');
                      $time = $createdat->format('h:i A');
                  ?>
                     <tr>
                        <td style="display:none;"><?php echo $record->CreatedDate ?></td>
                        <td align="right"><?php echo $date; ?></td>
                        <td align="right"><?php echo $time; ?></td>
                       <td><?php echo $record->code ?></td>
                       <td><?php echo $record->CostCenterName ?></td>
                       <!--   <td><?php echo $record->ApprovedBy ?></td> -->
                       <td><?php echo $record->FirstName ?></td>
                       <td><?php
                            $R = '';
                            $record->IsActive == 1 ? $R = 'ACTIVE' : $R = 'INACTIVE';
                            echo $R;
                            ?></td>
                       <td>
                         <?php
                          if ($record->DeletedBy == '') {
                          ?>
                           <a data-toggle="modal" href="#ccwizard" data-id="<?php echo $record->id; ?>" data-name="<?php echo $record->CostCenterName; ?>" ><i class="fa fa-pencil"></i></a>
                           <a href="<?php echo base_url() . 'deleteCostCenter?CostCode=' . $record->code; ?>"><i class="fa fa-trash"></i>&nbsp;&nbsp;&nbsp;</a>
                         <?php } ?>
                       </td>
                     </tr>
                 <?php
                    }
                  }
                  ?>
               </tbody>
             </table>


           </div>
         </div>
       </div>
       <!-- for Add and edit Modal -->
      <div class="modal fade" id="ccwizard" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog">
              <div class="modal-content">
                  <!-- Modal Header -->
                  <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal">
                          <span aria-hidden="true">&times;</span>
                          <span class="sr-only">Close</span>
                      </button>
                     <center><h4 class="modal-title" id="myModalLabel"></h4></center>
                  </div>

                  <!-- Modal Body -->
                  <div class="modal-body">
                      <form id="costCenterForm" class="form-horizontal" role="form">
                          <div class="form-group">
                              <div class="row">
                                  <div class="col-md-3 col-md-offset-2">
                                      Cost Center Name:
                                  </div>
                                  <div class="col-md-5">
                                      <input type="text" name="CostCenterName" id="CostCenterName" class="form-control">
                                      <input type="hidden" name="id" id="id" class="form-control">
                                  </div>
                              </div>
                          </div>
                      </form>
                  </div>

                  <!-- Modal Footer -->
                  <div class="modal-footer">
                      <a class="btn btn-cancel" data-dismiss="modal">Cancel</a>
                      <a class="btn btn-success font tempClick" id="tempClick">
                          <span class="bold">Submit</span>
                      </a>
                  </div>
              </div>
          </div>
      </div>

											

											

   </section>
 </div>
 <script type="text/javascript" src="<?php echo base_url(); ?>public/assets/js/common.js" charset="utf-8"></script>
 <script src="https://cdn.datatables.net/plug-ins/1.10.16/sorting/datetime-moment.js"></script>
 <script type="text/javascript">
   $(function() {
     $.fn.dataTable.moment('DD-MM-YYYY HH:mm A');
     $('#datatable').DataTable({
       "paging": true,
       "lengthChange": true,
       "searching": true,
       "ordering": true,
       // "columnDefs" : [{"targets":3, "type":"date-eu"}],
       "aaSorting": [
         [3, "desc"]
       ],
       "info": true,
       "autoWidth": true

     });
   });
 </script>
 
 <script>
    $(document).ready(function() {
        $("#ccwizard").on("shown.bs.modal", function(e) {
            var id = $(e.relatedTarget).data('id');
            var name = $(e.relatedTarget).data('name');
            $('#CostCenterName').val('');
            $('#id').val(id);
            if (id == 0) {
                $('.modal-title').html("Add CostCenter");
            } else {
                $('.modal-title').html("Edit CostCenter");
                $('#CostCenterName').val(name);
            }
        });

        $('#tempClick').click(function() {
            if ($('#CostCenterName').val() === '') {
                alert('Please Enter the Cost Center Name');
                return;
            }

            var formData = {
                id: $('#id').val(),
                CostCenterName: $('#CostCenterName').val()
            };

            $.ajax({
                type: 'POST',
                url: "<?php echo base_url();?>fetchCostCenterDetails",
                data: formData,
                dataType: 'json',
                success: function(response) {
                    if (response.status) {
                        alert(response.message);
                        $('#ccwizard').modal('hide');
                        location.reload();
                    } else {
                        alert(response.message);
                    }
                },
                error: function(xhr, status, error) {
                    alert('An error occurred: ' + error);
                }
            });
        });
    });
</script>

 <!-- <script src="https://cdn.datatables.net/plug-ins/1.10.11/sorting/date-eu.js"></script> -->