golf_backend/app/Views/members_list.php

<style>
.dataTables_filter{
margin-top: -35px;

}
.buttons-csv{
background-color: white;
color: #002B60;
border-color: #000;
}
.test {
box-shadow: 0 2px 6px 0 rgba(0,86,193,.5);
cursor: pointer;
color: #fff;
font-size: 15px;
padding: 10px;
width: 55px;
height: 25px;
line-height: 8px;
background: #00B4D5;
border-radius: 5px;
font-weight: 500;
display: block;
}
/* th{
text-align: center;
} */
</style>
<!-- start page title -->
<div class="row">
<div class="col-12">
<div class="page-title-box page-title-box-alt">
<h4 class="page-title">Members</h4>
<div class="page-title-right">
<ol class="breadcrumb m-0">
<li class="breadcrumb-item"><a href="<?= base_url() ?>member_add">
<button type="button" class="btn btn-primary waves-effect waves-light">Add</button>
</a></li>
<!-- <li class="breadcrumb-item"><a href="javascript: void(0);">Tables</a></li>
<li class="breadcrumb-item active">Datatables</li> -->
</ol>
</div>
</div>
</div>
</div>     
<!-- end page title --> 




<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">


<table id="datatable-buttons" class="table table-striped dt-responsive nowrap w-100">
<thead>
<tr>
<th hidden>id</th>
<th>Name</th>
<th>Mobile</th>
<th>Email</th>
<th>Credits</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>


<tbody>
<?php foreach ($Membersdata as $row)
{ ?>
<tr>
<td hidden><?php echo $row['id'];?></td>
    <td><?php echo $row['name']." ".$row['last_name'];?></td>
    <td style="text-align: center;"><?php echo $row['mobile'];?></td>
    <td><?php echo $row['email'];?></td>
    <td  style="text-align: center;" ">
	  <a href="<?= base_url() ?>view_credit_details/<?php echo md5($row['id']);?>"><span class="test"><?php echo $row['credits'];?></span>
	  </a></td>
    <td><?php if($row['is_active'] == 1){ echo "Active"; }else{ echo "Deactive"; }?></td>
    <td><a href="<?= base_url() ?>member_edit/<?php echo md5($row['id']);?>"><i class="mdi mdi-lead-pencil"  style="font-size:18px;"></i></a>
    <?php if ($row['is_active'] == 1) { ?>
        <a href="<?= base_url() ?>member_deactivate/<?php echo md5($row['id']);?>"><i class="mdi mdi-account-check-outline" title="Deactivate" style="font-size:18px;"></i></a>
    <?php } else { ?>
        <a href="<?= base_url() ?>member_activate/<?php echo md5($row['id']);?>"><i class="mdi mdi-account-cancel-outline" title="Activate" style="font-size:18px;"></i></a>
    <?php } ?>

   <i class="mdi mdi-eye-outline transaction"  id="<?php echo md5($row['id']);?>" style="font-size:18px;" title="Transactions"></i>  
</td>
   
    
</tr>    
<?php } ?>

</tbody>
</table>

</div> <!-- end card body-->
</div> <!-- end card -->
</div><!-- end col-->
</div>
<!-- end row-->


<!--  Modal content for the Large example -->
<div  class="modal fade" id="bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" id="modalname">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myLargeModalLabel"></h4>
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          </div>
        
        <div class="modal-body" id="model-table" ></div>                   
      </div>
    </div>
 </div>
</div>

<script>
$(document).on('click','.transaction',function(){
    var member_id = $(this).closest('i').attr('id');
   
  $.ajax({
    url:"<?= base_url(); ?>/transactions_list/"+member_id,
    method: 'GET',
    success: function(response) {

     $('#myLargeModalLabel').html('Transaction Details')
     $('#model-table').html(response);
     $('#bs-example-modal-lg').modal('show'); 
    },
    error: function(xhr, status, error) {
      // Handle the error here
      console.error(error);
    }
  });
});
</script>


<script>
    $(document).ready(function() {
      $('#datatable-buttons').DataTable({
        "order": [[0, 'desc']], // Set initial sorting to descending on the first column
        "dom": 'Bfrtip', // Show export buttons
        buttons: [
            {
                extend: 'pdfHtml5',
                title: 'Members', // Set your custom PDF title here
                text: 'PDF',
                customize: function(doc) {
                    // You can further customize the PDF here if needed
                    doc.content[1].table.body.forEach(function(row) {
                    row.splice(0, 1); // Remove the first column (ID column)
                  });
                }
            },
            {
                extend: 'print',
                title: 'Members', // Set your custom print title here
                text: 'Print',
                customize: function(win) {
                    // You can further customize the print output here if needed
                    $(win.document.body).find('table').find('th:first-child, td:first-child').remove();
                }
            },
            {
                extend: 'copy',
                text: 'Copy', // Set the title for the Copy button
                titleAttr: 'Copy', // Set the tooltip for the Copy button
                exportOptions: {
                  columns: ':not(:first-child)' // Exclude the first column (ID column)
                }
            },
            {
                extend: 'csv',
                text: 'CSV', // Set the title for the CSV button
                title: 'Members', // Set your custom print title here
                exportOptions: {
                  columns: ':not(:first-child)' // Exclude the first column (ID column)
                }
            }
        ]
      });
    });

function matchnum(event)
{
    var charcode;
    charcode = event.which || event.keyCode;
    if(charcode>= 48 && charcode <= 57)return true; //only  numbers
    return false;
}

</script>