nhance/app/Views/client_list.php

<style>
.table th,
.table td {
    padding: 8px;
}

table.dataTable tbody td {
    padding: 4px 4px !important;
}

table.dataTable thead th {
    padding: 4px 4px !important;
}

.col-12{

    max-width: 98% !important;
}
</style>

<div class="row" id="client_list">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                    <div class="row" style="margin-bottom:1rem;">
                        <div class="col-6" style="align-self: center;">
                            <h4 style="position: relative;">Client List</h4>
                        </div>
                        <div class="col-6" style="text-align: right; position: relative;top: 56px;">
                            <a href="<?= base_url("client/create"); ?>" type="button" id="btnAdd" class="btn btn-primary waves-effect waves-light" data-toggle="" data-placement="top" title="Add" data-trigger="hover">ADD</a>                
                        </div>
                    </div>
                <table class="table table-sm table-hover m-0 table-centered dt-responsive nowrap w-100" cellspacing="0"
                    id="tickets-table">
                    <thead class="bg-light">
                        <tr>
                            <th class="font-weight-medium">Client Name</th>
                            <th class="font-weight-medium">Account Manager</th>
                            <th class="font-weight-medium">Action</th>
                        </tr>
                    </thead>

                    <tbody>
                     <?php foreach($clientList as $row){ ?>
                        <tr >
                            <td class="client_info" data-id="<?php echo $row->id; ?>"><?php echo $row->client_name; ?> ( <?php echo $row->short_name; ?> ) </td>
                            <td>
                                <?php $account_managers = ''; ?>
                                <?php foreach ($client_rm as $client): ?>
                                    <?php if ($client->client_id == $row->id): ?>
                                        <?php $account_managers .= $client->account_manager . ', '; ?>
                                    <?php endif; ?>
                                <?php endforeach; ?>
                                <?php echo rtrim($account_managers, ', '); ?> 
                            </td>
                            <td>
                                <div class="btn-group dropdown">
                                    <a href="javascript: void(0);" class="dropdown-toggle arrow-none btn btn-light btn-sm" data-toggle="dropdown"aria-expanded="false"><i class="mdi mdi-dots-horizontal"></i></a>
                                    <div class="dropdown-menu dropdown-menu-right">
                                        <a class="dropdown-item" href="<?= base_url("client/list/"); ?><?= $row->id;?>"><i class="mdi mdi-pencil mr-2 text-muted font-18 vertical-middle"></i>Edit</a>
                                        <a class="dropdown-item" href="<?= base_url("client/deposit/{$row->id}"); ?>"><i class="mdi mdi-cash mr-2 text-muted font-18 vertical-middle"></i>CD Transactions</a>
                                        <?php if(get_role_id() != 3 && get_role_id() != 4) { ?>
                                            <a class="dropdown-item" data-id="<?= $row->id;?>" onclick="removeClient(this)"><i class="mdi mdi-delete mr-2 text-muted font-18 vertical-middle"></i>Delete</a>
                                        <?php } ?>
                                    </div>
                                </div>
                            </td>

                        </tr>

                        <?php } ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div><!-- end col -->
</div>
<!-- end row -->


<div id="append_client_info"></div>


<script>

$(document).ready(function()
{

    $('#tickets-table').DataTable({
        dom: "<'row'<'col-sm-0'f><'col-sm-9 text-right'B>>" + 
            "<'row'<'col-sm-12'tr>>" + 
            "<'row'<'col-sm-5'i><'col-sm-7'p>>", 
        buttons: [{
            extend: 'csv',
            text: 'CSV',
            title: 'ClientList',
            className: 'my_class',
            exportOptions: {
                columns: ':not(:last-child)'
            },
        }],
        language: {
            search: "_INPUT_",
            searchPlaceholder: "Search..."
        },
        paging: true ,
        // pagingType: 'full_numbers'
    });
}) 

function removeClient(element) 
{

    Swal.fire({
        title: "Are you sure?",
        text: "You need to remove this client.",
        icon: "info",
        showCancelButton: true,
        confirmButtonColor: "#3085d6",
        confirmButtonText: "Yes",
    }).then((result) => {

        if (result.isConfirmed) {

            $('.loader').fadeIn();
            $('.loader-mask').fadeIn();

            var id = element.getAttribute('data-id');
            var form_action = '<?= base_url("client/remove/") ?>' + id; 
            $.ajax({
                url: form_action,
                type: "GET",
                dataType: 'json',
                processData: false,
                contentType: false,
                success: function(res) {
                    
                    $('.loader').fadeOut();
                    $('.loader-mask').delay(350).fadeOut('slow');

                    if(res){
                    if (res.status == true) {
                        toastr.success('Client removed successfully.', 'success');
                        location.reload();
                    } else {
                        Swal.fire({
                            title: "warning!",
                            text: res.message,
                            icon: "warning"
                        });
                        // toastr.warning(res.message, 'warning');
                    }
                    }
                },
                error: function (xhr, status, error) {
                    console.error(xhr.responseText);
                    console.error(status, error);
                    $('.loader').fadeOut();
                    $('.loader-mask').delay(350).fadeOut('slow');
                    console.log('Something Wrong!', 'warning');
                }
            });
        }

    });

}

$(document).on('click', '.client_info', function() {

    $('.loader').fadeIn();
    $('.loader-mask').fadeIn();

    var client_id = $(this).data('id')
    $('#append_client_info').empty();

    console.log(client_id);
    console.log('client_info');

    $('#client_info').show();
    $('#client_list').hide();

    $.ajax({
        url: "<?= base_url('util/get-client-details/') ?>" + client_id,
        type: "GET",
        dataType: 'json',
        processData: false,
        contentType: false,
        success: function(res) {

            $('.loader').fadeOut();
            $('.loader-mask').delay(350).fadeOut('slow');

            console.log(res);
            console.log(res.data.length);
            $('#append_client_info').append(res.data);

        },
        error: function(xhr, status, error) {
            console.error(xhr.responseText);
            console.error(status, error);
            $('.loader').fadeOut();
            $('.loader-mask').delay(350).fadeOut('slow');
        }
    });


});

$(document).on('click', '.client_info_close', function() {

    console.log('client_info_close');
    $('#client_info').hide();
    $('#client_list').show();
});





</script>