nhance/app/Views/ticket_feedback_list.php

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

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

.col-12 {

    max-width: 98% !important;
}

.dataTables_filter {
    position: absolute;
}

.right-align-input {
    text-align: right;
}

.addbtnStyle {
    margin-left: 20px !important;
}
</style>
<style>
.table th:nth-child(1),
.table td:nth-child(1) {
    max-width: 200px !important; 
    min-width: 100px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
.dataTables_length label {height: 21px !important;}

</style>



<div class="col-12">
    <div class="card">
        <div class="card-body">
            <div class="row" style="padding-bottom: 10px;">
                <div class="col-6" style="align-self: center;">
                    <h4 style="position: relative;">Claim Feedback List </h4>
                </div>

            </div>
            <div class="table-responsive">
                <table data-custom-table-css="table" id="scroll-horizontal-datatable" class="table w-100 nowrap">
                    <thead class="bg-light">
                        <tr>
                            <th>Claim Number</th>
                            <th>Emp Code</th>
                            <th>Emp name</th>
                            <th>Corporate name</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php if (isset($feedback_data)) { ?>
                            <?php foreach($feedback_data as $data){ ?>
                                    <tr onclick="viewFeedbackForm(<?php echo $data['id']; ?>)">
                                    <td><?php echo $data['claim_number'] ?: 'N/A'; ?></td>
                                    <td><?php echo $data['emp_code'] ?: 'N/A'; ?></td>
                                    <td><?php echo $data['emp_name'] ?: 'N/A'; ?></td>
                                    <td><?php echo $data['client_name'] ?: 'N/A'; ?></td>
                                </tr>
                            <?php } ?>
                        <?php } ?>
                    </tbody>
                </table>

                <div>
                </div>
            </div>
        </div><!-- end col -->
    </div>
</div>



<!-------------------------------------------------------------------------------------------------->

<script>

// Datatable document ready
$(document).ready(function() {

    var ticketsTable = $('#scroll-horizontal-datatable');

    if (ticketsTable.length) {

        ticketsTable.DataTable({
            scrollX: true,
            // dom: "<'row'<'col-sm-6'f><'col-sm-6 text-right'B>>" + // Filter left, buttons right
            //     "<'row'<'col-sm-12'tr>>" +
            //     "<'row'<'col-sm-5'i><'col-sm-7'p>>", // Pagination at the bottom, without page length selector
            // buttons: [{
            //         extend: 'csv',
            //         text: 'CSV',
            //         title: 'Claim-List',
            //     },
            //     {
            //         extend: 'excel',
            //         text: 'Excel',
            //         title: 'claim-List',
            //         exportOptions: {
            //             orthogonal: 'sort'
            //         },
            //     },
            // ],
            dom: "<'row'<'col-sm-6'f><'col-sm-6 text-right'B>>" + // Filter left, buttons right
                "<'row'<'col-sm-12'tr>>" +
                "<'row align-items-center'<'col-5 text-start'i><'col-7 d-flex justify-content-end align-items-center'<'me-2'l>p>>",
            lengthMenu: [[10, 20, 50, 100], [10, 20, 50, 100]],
            buttons: [
              {
                  extend: 'collection',
                  text: '<span class=" btn-custom"> Export </span><i class="mdi mdi-menu-down"></i>',
                  className: 'btn app-btn-secondary ',
                  buttons: [
                            {
                                extend: 'csv',
                                text: '<i class="mdi mdi-file-delimited " ></i><span class="  btn-custom">  CSV </span>',
                                className: 'app-btn-primary ',
                                title: 'Claim-List',
                            },
                            {
                                extend: 'excel',
                                text: '<i class="mdi mdi-file-excel " ></i><span class="  btn-custom">  EXCEL </span>',
                                exportOptions: {
                                    orthogonal: 'sort'
                                },
                                title: 'claim-List',
                                sheetName: 'claim-List',
                                className: 'app-btn-primary ',
                            }
                  ]
              }
          ],
            language: {
                    search: `
                    <div class="datatable-search-wrapper" style="position:relative; display:inline-block;">
                        _INPUT_
                        <i class="mdi mdi-magnify datatable-search-icon" 
                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666;"></i>
                        <i class="mdi mdi-close-circle datatable-clear-icon" 
                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666; display:none;"></i>
                    </div>`,
                    searchPlaceholder: "Search",
                    emptyTable: '<div class="text-center text-muted">No Data found</div>'
                },
            paging: true, // Enable pagination
            pageLength: 10, // Set default number of rows per page (optional)
            ordering: false,
        });
    } else {
        console.error("Table atet found.");
    }
});


    function viewFeedbackForm(ticket_id){
        
        console.log("Ticket ID : ",ticket_id);
        var md5Hash_ticket_id =  md5(ticket_id);
        console.log("MD5 Ticket ID : ",md5Hash_ticket_id);

        // alert(md5Hash);

        feedbackPage = `<?= base_url("claims-feedback-form/") ?>${md5Hash_ticket_id}/1`

        // window.location.href = feedbackPage;
        window.open(feedbackPage, "_blank");




    }


</script>