FIX_UI issues noted

This commit is contained in:
sanjeev.p 2026-04-20 10:45:11 +05:30
parent ad6ab53a6f
commit e864a5cd0f
10 changed files with 402 additions and 104 deletions

View File

@ -341,6 +341,62 @@ table.dataTable tbody td {
</style>
<?php
helper('datatable_view');
$UserList = $UserList ?? [];
$ul_header_labels = ['Name', 'Email', 'Mobile No', 'Role', 'Status', 'Action'];
$ul_col_count = count($ul_header_labels);
$ul_col_max_len = array_fill(0, $ul_col_count, 0);
for ($i = 0; $i < $ul_col_count; $i++) {
$ul_col_max_len[$i] = mb_strlen($ul_header_labels[$i]);
}
if (!empty($UserList)) {
foreach ($UserList as $row) {
$ul_col_max_len[0] = max($ul_col_max_len[0], mb_strlen((string) ($row->first_name ?? '')));
$ul_col_max_len[1] = max($ul_col_max_len[1], mb_strlen((string) ($row->email ?? '')));
$ul_col_max_len[2] = max($ul_col_max_len[2], mb_strlen((string) ($row->mobile ?? '')));
$ul_col_max_len[3] = max($ul_col_max_len[3], mb_strlen((string) ($row->user_role ?? '')));
$statusLabel = (($row->is_active ?? 0) == 1) ? 'Active' : 'In-Active';
$ul_col_max_len[4] = max($ul_col_max_len[4], mb_strlen($statusLabel));
$ul_col_max_len[5] = max($ul_col_max_len[5], 4);
}
}
$ul_col_min_px = array_fill(0, $ul_col_count, 80);
$ul_col_max_px = array_fill(0, $ul_col_count, 360);
$ul_col_min_px[0] = 72;
$ul_col_max_px[0] = 280;
$ul_col_min_px[5] = 72;
$ul_col_max_px[5] = 96;
$ul_col_width_px = nhance_dt_column_widths_px($ul_header_labels, $ul_col_max_len, $ul_col_min_px, $ul_col_max_px);
?>
<style>
<?php for ($i = 0; $i < $ul_col_count; $i++) : ?>
#user-table_wrapper .dataTables_scrollHead table thead th:nth-child(<?= $i + 1 ?>),
#user-table thead th:nth-child(<?= $i + 1 ?>) {
min-width: <?= (int) $ul_col_width_px[$i] ?>px;
width: <?= (int) $ul_col_width_px[$i] ?>px;
box-sizing: border-box;
vertical-align: middle;
overflow: visible !important;
}
#user-table tbody td:nth-child(<?= $i + 1 ?>) {
width: <?= (int) $ul_col_width_px[$i] ?>px;
max-width: <?= (int) $ul_col_width_px[$i] ?>px;
min-width: <?= (int) $ul_col_width_px[$i] ?>px;
box-sizing: border-box;
vertical-align: middle;
}
<?php endfor; ?>
#user-table tbody td:not(:last-child) {
overflow: hidden;
text-overflow: ellipsis;
}
#user-table tbody td:last-child {
overflow: visible;
text-overflow: clip;
}
</style>
<?php
$session = \Config\Services::session();
@ -951,8 +1007,8 @@ table.dataTable tbody td {
allowInput: false,
});
table = $('#user-table').DataTable({
scrollX: true,
nhanceListDataTableBeforeInit();
table = $('#user-table').DataTable(nhanceMergeListDataTableOptions({
// dom: "<'row'<'col-sm-3'f><'col-sm-9'B>>" +
// "<'row'<'col-sm-12'tr>>" +
// "<'row'<'col-sm-5'i><'col-sm-7'p>>",
@ -1083,8 +1139,15 @@ table.dataTable tbody td {
$(this).addClass('active');
loadPartner();
});
}
});
},
columnDefs: [
<?php for ($i = 0; $i < $ul_col_count; $i++) : ?>
{ targets: <?= $i ?>, width: '<?= (int) $ul_col_width_px[$i] ?>px' },
<?php endfor; ?>
]
}));
nhanceListDataTableAfterInit();
nhanceListDataTableBindAdjust(table);
function applyBottomRowDropup() {
if (!table) return;
@ -1109,12 +1172,12 @@ table.dataTable tbody td {
// IMPORTANT — DataTables draw event REF: TTS
table.on('draw.dt', function () {
let rowCount = $('#scroll-horizontal-datatable').DataTable().rows({ filter: 'applied' }).count();
let rowCount = table.rows({ filter: 'applied' }).count();
if (rowCount <= 2) {
$('.dataTables_scrollBody').css('overflow', 'inherit');
$('#user-table_wrapper .dataTables_scrollBody').css('overflow', 'inherit');
} else {
$('.dataTables_scrollBody').css('overflow', 'auto');
$('#user-table_wrapper .dataTables_scrollBody').css('overflow', 'auto');
}
});

View File

@ -180,7 +180,7 @@ table.dataTable thead th {
<tbody>
<?php foreach($clientList as $index => $row){ ?>
<tr >
<td class="text-center"><?=$index+1?></td>
<td><?=$index+1?></td>
<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 = ''; ?>

View File

@ -1,4 +1,5 @@
<?php
helper('datatable_view');
$end_header_labels = ['S.No', 'Name/code', 'Policy name', 'Endorsement ID', 'Insurer name', 'Remarks', 'Endorsement Type', 'Status', 'Action'];
$end_col_count = count($end_header_labels);
$end_col_max_len = array_fill(0, $end_col_count, 0);

View File

@ -1,3 +1,4 @@
<?php helper('datatable_view'); ?>
<style>
.table th,
.table td {

View File

@ -1,3 +1,24 @@
<?php
helper('datatable_view');
$insurerList = $insurerList ?? [];
$ins_header_labels = ['Name', 'Type', 'Action'];
$ins_col_count = count($ins_header_labels);
$ins_col_max_len = array_fill(0, $ins_col_count, 0);
for ($i = 0; $i < $ins_col_count; $i++) {
$ins_col_max_len[$i] = mb_strlen($ins_header_labels[$i]);
}
if (is_array($insurerList)) {
foreach ($insurerList as $row) {
$nameCell = trim(($row['name'] ?? '') . ' ( ' . ($row['short_name'] ?? '') . ' )');
$ins_col_max_len[0] = max($ins_col_max_len[0], mb_strlen($nameCell));
$ins_col_max_len[1] = max($ins_col_max_len[1], mb_strlen((string) ($row['type'] ?? '')));
$ins_col_max_len[2] = max($ins_col_max_len[2], 4);
}
}
$ins_col_min_px = [120, 88, 72];
$ins_col_max_px = [560, 240, 96];
$ins_col_width_px = nhance_dt_column_widths_px($ins_header_labels, $ins_col_max_len, $ins_col_min_px, $ins_col_max_px);
?>
<style>
.btn-color {
background-color: rgba(52, 174, 178, 1);
@ -18,6 +39,33 @@
}
</style>
<style>
<?php for ($i = 0; $i < $ins_col_count; $i++) : ?>
#insurer-list-table_wrapper .dataTables_scrollHead table thead th:nth-child(<?= $i + 1 ?>),
#insurer-list-table thead th:nth-child(<?= $i + 1 ?>) {
min-width: <?= (int) $ins_col_width_px[$i] ?>px;
width: <?= (int) $ins_col_width_px[$i] ?>px;
box-sizing: border-box;
vertical-align: middle;
overflow: visible !important;
}
#insurer-list-table tbody td:nth-child(<?= $i + 1 ?>) {
width: <?= (int) $ins_col_width_px[$i] ?>px;
max-width: <?= (int) $ins_col_width_px[$i] ?>px;
min-width: <?= (int) $ins_col_width_px[$i] ?>px;
box-sizing: border-box;
vertical-align: middle;
}
<?php endfor; ?>
#insurer-list-table tbody td:not(:last-child) {
overflow: hidden;
text-overflow: ellipsis;
}
#insurer-list-table tbody td:last-child {
overflow: visible;
text-overflow: clip;
}
</style>
<div class="container-fluid-min">
<div class="row" id="insurer_list">
@ -30,7 +78,7 @@
</div>
</div> -->
<table data-custom-table-css="table" class="table mb-0 nowrap" cellspacing="0"
id="tickets-table">
id="insurer-list-table">
<thead class="bg-light">
<tr>
<th class="font-weight-medium">Name&nbsp;</th>
@ -71,10 +119,8 @@
<script>
$(document).ready(function() {
var table = $('#tickets-table').DataTable({
// dom: "<'row'<'col-12 d-flex justify-content-between align-items-center'<'datatable-search dataTables_filter'f><'datatable-buttons dt-buttons'B>>>" +
// "<'row'<'col-sm-12'tr>>" +
// "<'row'<'col-sm-5'i><'col-sm-7'p>>",
nhanceListDataTableBeforeInit();
var table = $('#insurer-list-table').DataTable(nhanceMergeListDataTableOptions({
dom: "<'row'<'col-12 d-flex justify-content-between align-items-center'<'datatable-search dataTables_filter'f><'datatable-buttons dt-buttons'B>>>" +
"<'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>>",
@ -121,14 +167,21 @@
}
},
paging: true,
});
columnDefs: [
<?php for ($i = 0; $i < $ins_col_count; $i++) : ?>
{ targets: <?= $i ?>, width: '<?= (int) $ins_col_width_px[$i] ?>px' },
<?php endfor; ?>
],
}));
nhanceListDataTableAfterInit();
nhanceListDataTableBindAdjust(table);
function applyBottomRowDropup() {
if (!table) return;
const currentRows = table.rows({ page: 'current' }).nodes().toArray();
$('#tickets-table tbody tr').removeClass('nh-force-dropup');
$('#tickets-table tbody tr td.table-action-cell .btn-group.dropdown').removeClass('dropup');
$('#insurer-list-table tbody tr').removeClass('nh-force-dropup');
$('#insurer-list-table tbody tr td.table-action-cell .btn-group.dropdown').removeClass('dropup');
const targetCount = Math.min(2, currentRows.length);
for (let i = 0; i < targetCount; i++) {
@ -139,7 +192,7 @@
}
}
applyBottomRowDropup();
$('#tickets-table').on('draw.dt', applyBottomRowDropup);
$('#insurer-list-table').on('draw.dt', applyBottomRowDropup);
})

View File

@ -248,20 +248,20 @@ $ret_col_width_px = nhance_dt_column_widths_px($ret_header_labels, $ret_col_max_
if (isset($employees)) {
foreach ($employees as $key => $employee) { ?>
<tr>
<td class="text-center"><b><?php echo ($key + 1) ?></b></td>
<td class="text-center"><?php echo $employee['policy_number'] ?></td>
<td class="text-center"><?php echo $employee['endorsement_no'] ?></td>
<td><b><?php echo ($key + 1) ?></b></td>
<td><?php echo $employee['policy_number'] ?></td>
<td><?php echo $employee['endorsement_no'] ?></td>
<td class="text-center"><?php echo $employee['endorsement_description'] ?></td>
<td class="text-center"><?php echo $employee['client_name'] ? $employee['client_name'] . ' ( ' . $employee['client_short_name'] . ' ) ' : 'N/A' ?></td>
<td class="text-center"><?php echo $employee['insurer_name'] ? $employee['insurer_name'] . ' ( ' . $employee['insurer_short_name'] . ' ) ' : 'N/A' ?></td>
<td class="text-center"><?php echo $employee['agent_name'] ?? 'N/A' ?></td>
<td class="text-center"><?php echo $employee['manager_name'] ?? 'N/A' ?></td>
<td class="text-center"><?php if (!empty($employee['created_at'])):
<td><?php echo $employee['client_name'] ? $employee['client_name'] . ' ( ' . $employee['client_short_name'] . ' ) ' : 'N/A' ?></td>
<td><?php echo $employee['insurer_name'] ? $employee['insurer_name'] . ' ( ' . $employee['insurer_short_name'] . ' ) ' : 'N/A' ?></td>
<td><?php echo $employee['agent_name'] ?? 'N/A' ?></td>
<td><?php echo $employee['manager_name'] ?? 'N/A' ?></td>
<td><?php if (!empty($employee['created_at'])):
$cd = date("j F Y", strtotime($employee['created_at']));
$ct = date("h:i A", strtotime($employee['created_at']));
echo $cd . "<br><span class='time'> " . $ct . "</span>";
endif; ?></td>
<td class="text-center"><?php if ($employee['status'] == 'open') {
<td><?php if ($employee['status'] == 'open') {
echo '<span class="badge badge-primary">' . $employee['status'] . '</span>';
} elseif ($employee['status'] == 'inprogress') {
echo '<span class="badge badge-warning">' . $employee['status'] . '</span>';
@ -270,7 +270,7 @@ $ret_col_width_px = nhance_dt_column_widths_px($ret_header_labels, $ret_col_max_
}
?>
</td>
<td class="text-center table-action-cell">
<td class="table-action-cell">
<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">

View File

@ -64,9 +64,6 @@
#map_emp_modal .modal-backdrop.show {
opacity: 0.5; /* Darken backdrop for better focus */
}
th:first-child, td:first-child {
width: 50px; /* Adjust width as needed */
}
.table-responsive {
overflow-x: auto;
}
@ -77,14 +74,14 @@ th:first-child, td:first-child {
}
/* Keep this long header readable and prevent sort icon overlap. */
#tickets-table th.existing-policy-col,
#tickets-table td.existing-policy-col {
#test-members-list-table th.existing-policy-col,
#test-members-list-table td.existing-policy-col {
min-width: 170px;
white-space: nowrap;
}
/* Action column aligned center in both head and body. */
#tickets-table th.action-col {
#test-members-list-table th.action-col {
min-width: 90px;
text-align: center !important;
}
@ -110,7 +107,104 @@ th:first-child, td:first-child {
</style>
<?php $pro_rata_total = 0; $gst_total = 0 ?>
<?php
helper('datatable_view');
$getData = $getData ?? null;
$tm_show_client_branch = isset($getData) && $getData['client_id'] == '0' && $getData['policy_id'] == '0' && $getData['branch_id'] == '0' && ($getData['emp_code'] != '' || $getData['emp_name'] != '' || $getData['status'] != '');
$tm_show_branch = isset($getData) && $getData['client_id'] != '0' && $getData['branch_id'] == '0';
$tm_header_labels = [' ', 'S.No'];
if ($tm_show_client_branch) {
$tm_header_labels[] = 'Client/Branch';
}
if ($tm_show_branch) {
$tm_header_labels[] = 'Branch';
}
$tm_header_labels = array_merge($tm_header_labels, [
'Name', 'EMP Code', 'Relationship', 'Gender', 'Date of Birth',
'Existing Policy Count', 'Action',
]);
$tm_col_count = count($tm_header_labels);
$tm_col_max_len = array_fill(0, $tm_col_count, 0);
for ($i = 0; $i < $tm_col_count; $i++) {
$tm_col_max_len[$i] = mb_strlen($tm_header_labels[$i]);
}
if (isset($employees) && is_array($employees)) {
foreach ($employees as $key => $employee) {
$ci = 0;
$tm_col_max_len[$ci] = max($tm_col_max_len[$ci], 1);
$ci++;
$tm_col_max_len[$ci] = max($tm_col_max_len[$ci], mb_strlen((string) ($key + 1)));
$ci++;
if ($tm_show_client_branch) {
$cb = ($employee['client_short_name'] ?? '') . ' - ' . ($employee['client_branch_name'] ?? '');
$tm_col_max_len[$ci] = max($tm_col_max_len[$ci], mb_strlen($cb));
$ci++;
}
if ($tm_show_branch) {
$tm_col_max_len[$ci] = max($tm_col_max_len[$ci], mb_strlen((string) ($employee['client_branch_name'] ?? '')));
$ci++;
}
$tm_col_max_len[$ci] = max($tm_col_max_len[$ci], mb_strlen((string) ($employee['name'] ?? '')));
$ci++;
$tm_col_max_len[$ci] = max($tm_col_max_len[$ci], mb_strlen((string) ($employee['emp_code'] ?? '')));
$ci++;
$tm_col_max_len[$ci] = max($tm_col_max_len[$ci], mb_strlen((string) ($employee['relationship'] ?? '')));
$ci++;
$tm_col_max_len[$ci] = max($tm_col_max_len[$ci], mb_strlen((string) ($employee['gender'] ?? '')));
$ci++;
$dobStr = '';
if (!empty($employee['dob'])) {
$dobStr = date('d/M/Y', strtotime((string) $employee['dob']));
}
$tm_col_max_len[$ci] = max($tm_col_max_len[$ci], mb_strlen($dobStr));
$ci++;
$tm_col_max_len[$ci] = max($tm_col_max_len[$ci], mb_strlen((string) ($employee['policy_count'] ?? '')));
$ci++;
$tm_col_max_len[$ci] = max($tm_col_max_len[$ci], 4);
}
}
$tm_col_min_px = array_fill(0, $tm_col_count, 80);
$tm_col_max_px = array_fill(0, $tm_col_count, 360);
$tm_col_min_px[0] = 44;
$tm_col_max_px[0] = 56;
$tm_col_min_px[1] = 48;
$tm_col_max_px[1] = 72;
$tm_col_min_px[$tm_col_count - 2] = 120;
$tm_col_max_px[$tm_col_count - 2] = 400;
$tm_col_min_px[$tm_col_count - 1] = 72;
$tm_col_max_px[$tm_col_count - 1] = 96;
$tm_col_width_px = nhance_dt_column_widths_px($tm_header_labels, $tm_col_max_len, $tm_col_min_px, $tm_col_max_px);
$pro_rata_total = 0;
$gst_total = 0;
?>
<style>
<?php for ($i = 0; $i < $tm_col_count; $i++) : ?>
#test-members-list-table_wrapper .dataTables_scrollHead table thead th:nth-child(<?= $i + 1 ?>),
#test-members-list-table thead th:nth-child(<?= $i + 1 ?>) {
min-width: <?= (int) $tm_col_width_px[$i] ?>px;
width: <?= (int) $tm_col_width_px[$i] ?>px;
box-sizing: border-box;
vertical-align: middle;
overflow: visible !important;
}
#test-members-list-table tbody td:nth-child(<?= $i + 1 ?>) {
width: <?= (int) $tm_col_width_px[$i] ?>px;
max-width: <?= (int) $tm_col_width_px[$i] ?>px;
min-width: <?= (int) $tm_col_width_px[$i] ?>px;
box-sizing: border-box;
vertical-align: middle;
}
<?php endfor; ?>
#test-members-list-table tbody td:not(:last-child) {
overflow: hidden;
text-overflow: ellipsis;
}
#test-members-list-table tbody td:last-child {
overflow: visible;
text-overflow: clip;
}
</style>
<div class="row" id="client_list">
<div class="col-12">
@ -121,7 +215,7 @@ th:first-child, td:first-child {
<h3 style="position: relative;">Employees</h3>
</div>
</div> -->
<table data-custom-table-css="table" class="table mb-0 nowrap" cellspacing="0" id="tickets-table">
<table data-custom-table-css="table" class="table mb-0 nowrap" cellspacing="0" id="test-members-list-table">
<thead class="bg-light">
<tr>
<th><input type="checkbox" id="selectAll" onclick="toggleAll(this)">&nbsp;</th>
@ -444,15 +538,12 @@ th:first-child, td:first-child {
});
$(document).ready(function() {
var ticketsTable = $('#tickets-table');
var ticketsTable = $('#test-members-list-table');
if (ticketsTable.length) {
var table = 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
dom: "<'row'<'col-sm-6'f><'col-sm-6 text-right'B>>" + // Filter left, buttons right
if (ticketsTable.length) {
nhanceListDataTableBeforeInit();
var nhTestMembersTable = ticketsTable.DataTable(nhanceMergeListDataTableOptions({
dom: "<'row'<'col-sm-6'f><'col-sm-6 text-right'B>>" +
"<'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]],
@ -486,18 +577,24 @@ th:first-child, td:first-child {
next: '►'
}
},
paging: true, // Enable pagination
pageLength: 10 // Set default number of rows per page (optional)
});
paging: true,
pageLength: 10,
columnDefs: [
<?php for ($i = 0; $i < $tm_col_count; $i++) : ?>
{ targets: <?= $i ?>, width: '<?= (int) $tm_col_width_px[$i] ?>px' },
<?php endfor; ?>
],
}));
nhanceListDataTableAfterInit();
nhanceListDataTableBindAdjust(nhTestMembersTable);
function applyBottomRowDropup() {
if (!table) return;
if (!nhTestMembersTable) return;
const currentRows = table.rows({ page: 'current' }).nodes().toArray();
$('#tickets-table tbody tr').removeClass('nh-force-dropup');
$('#tickets-table tbody tr td.table-action-cell .btn-group.dropdown').removeClass('dropup');
const currentRows = nhTestMembersTable.rows({ page: 'current' }).nodes().toArray();
$('#test-members-list-table tbody tr').removeClass('nh-force-dropup');
$('#test-members-list-table tbody tr td.table-action-cell .btn-group.dropdown').removeClass('dropup');
// Mark last two rows on current page to open action menu upward.
const targetCount = Math.min(2, currentRows.length);
for (let i = 0; i < targetCount; i++) {
const row = currentRows[currentRows.length - 1 - i];
@ -507,7 +604,7 @@ th:first-child, td:first-child {
}
}
applyBottomRowDropup();
$('#tickets-table').on('draw.dt', applyBottomRowDropup);
$('#test-members-list-table').on('draw.dt', applyBottomRowDropup);
} else {
console.error("Table not found.");
}

View File

@ -1,3 +1,24 @@
<?php
helper('datatable_view');
$tf_header_labels = ['Claim Number', 'Emp Code', 'Emp name', 'Corporate name'];
$tf_col_count = count($tf_header_labels);
$tf_col_max_len = array_fill(0, $tf_col_count, 0);
for ($i = 0; $i < $tf_col_count; $i++) {
$tf_col_max_len[$i] = mb_strlen($tf_header_labels[$i]);
}
$feedback_rows = $feedback_data ?? [];
if (is_array($feedback_rows)) {
foreach ($feedback_rows as $data) {
$tf_col_max_len[0] = max($tf_col_max_len[0], mb_strlen((string) ($data['claim_number'] ?: 'N/A')));
$tf_col_max_len[1] = max($tf_col_max_len[1], mb_strlen((string) ($data['emp_code'] ?: 'N/A')));
$tf_col_max_len[2] = max($tf_col_max_len[2], mb_strlen((string) ($data['emp_name'] ?: 'N/A')));
$tf_col_max_len[3] = max($tf_col_max_len[3], mb_strlen((string) ($data['client_name'] ?: 'N/A')));
}
}
$tf_col_min_px = [120, 88, 120, 140];
$tf_col_max_px = [360, 200, 400, 520];
$tf_col_width_px = nhance_dt_column_widths_px($tf_header_labels, $tf_col_max_len, $tf_col_min_px, $tf_col_max_px);
?>
<style>
.table th,
.table td {
@ -26,13 +47,26 @@ table.dataTable tbody td {
}
</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;
<?php for ($i = 0; $i < $tf_col_count; $i++) : ?>
#ticket-feedback-list-table_wrapper .dataTables_scrollHead table thead th:nth-child(<?= $i + 1 ?>),
#ticket-feedback-list-table thead th:nth-child(<?= $i + 1 ?>) {
min-width: <?= (int) $tf_col_width_px[$i] ?>px;
width: <?= (int) $tf_col_width_px[$i] ?>px;
box-sizing: border-box;
vertical-align: middle;
overflow: visible !important;
}
#ticket-feedback-list-table tbody td:nth-child(<?= $i + 1 ?>) {
width: <?= (int) $tf_col_width_px[$i] ?>px;
max-width: <?= (int) $tf_col_width_px[$i] ?>px;
min-width: <?= (int) $tf_col_width_px[$i] ?>px;
box-sizing: border-box;
vertical-align: middle;
}
<?php endfor; ?>
#ticket-feedback-list-table tbody td {
overflow: hidden;
text-overflow: ellipsis;
}
.dataTables_length label {height: 21px !important;}
@ -53,7 +87,7 @@ table.dataTable tbody td {
</div> -->
<div class="table-responsive">
<table data-custom-table-css="table" id="scroll-horizontal-datatable" class="table w-100 nowrap">
<table data-custom-table-css="table" id="ticket-feedback-list-table" class="table w-100 nowrap">
<thead class="bg-light">
<tr>
<th>Claim Number</th>
@ -92,30 +126,13 @@ table.dataTable tbody td {
// Datatable document ready
$(document).ready(function() {
var ticketsTable = $('#scroll-horizontal-datatable');
var ticketsTable = $('#ticket-feedback-list-table');
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
nhanceListDataTableBeforeInit();
var nhTicketFeedbackTable = ticketsTable.DataTable(nhanceMergeListDataTableOptions({
dom: "<'row'<'col-sm-6'f><'col-sm-6 text-right'B>>" +
"<'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]],
@ -156,10 +173,17 @@ $(document).ready(function() {
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)
paging: true,
pageLength: 10,
ordering: false,
});
columnDefs: [
<?php for ($i = 0; $i < $tf_col_count; $i++) : ?>
{ targets: <?= $i ?>, width: '<?= (int) $tf_col_width_px[$i] ?>px' },
<?php endfor; ?>
],
}));
nhanceListDataTableAfterInit();
nhanceListDataTableBindAdjust(nhTicketFeedbackTable);
} else {
console.error("Table atet found.");
}
@ -185,4 +209,4 @@ $(document).ready(function() {
}
</script>
</script>

View File

@ -1,3 +1,23 @@
<?php
helper('datatable_view');
$tpaList = $tpaList ?? [];
$tpa_header_labels = ['Name', 'Action'];
$tpa_col_count = count($tpa_header_labels);
$tpa_col_max_len = array_fill(0, $tpa_col_count, 0);
for ($i = 0; $i < $tpa_col_count; $i++) {
$tpa_col_max_len[$i] = mb_strlen($tpa_header_labels[$i]);
}
if (is_array($tpaList)) {
foreach ($tpaList as $row) {
$nameCell = trim(($row['name'] ?? '') . ' ( ' . ($row['short_name'] ?? '') . ' )');
$tpa_col_max_len[0] = max($tpa_col_max_len[0], mb_strlen($nameCell));
$tpa_col_max_len[1] = max($tpa_col_max_len[1], 4);
}
}
$tpa_col_min_px = [160, 72];
$tpa_col_max_px = [560, 96];
$tpa_col_width_px = nhance_dt_column_widths_px($tpa_header_labels, $tpa_col_max_len, $tpa_col_min_px, $tpa_col_max_px);
?>
<style>
.custom-dropdown-menu {
display: none;
@ -39,6 +59,33 @@
}
.dataTables_length label {height: 21px !important;}
</style>
<style>
<?php for ($i = 0; $i < $tpa_col_count; $i++) : ?>
#tpa-list-table_wrapper .dataTables_scrollHead table thead th:nth-child(<?= $i + 1 ?>),
#tpa-list-table thead th:nth-child(<?= $i + 1 ?>) {
min-width: <?= (int) $tpa_col_width_px[$i] ?>px;
width: <?= (int) $tpa_col_width_px[$i] ?>px;
box-sizing: border-box;
vertical-align: middle;
overflow: visible !important;
}
#tpa-list-table tbody td:nth-child(<?= $i + 1 ?>) {
width: <?= (int) $tpa_col_width_px[$i] ?>px;
max-width: <?= (int) $tpa_col_width_px[$i] ?>px;
min-width: <?= (int) $tpa_col_width_px[$i] ?>px;
box-sizing: border-box;
vertical-align: middle;
}
<?php endfor; ?>
#tpa-list-table tbody td:first-child {
overflow: hidden;
text-overflow: ellipsis;
}
#tpa-list-table tbody td:last-child {
overflow: visible;
text-overflow: clip;
}
</style>
<div class="container-fluid-min">
<div class="row" id="tpa_list">
<div class="col-12">
@ -50,7 +97,7 @@
</div>
</div> -->
<table data-custom-table-css="table" class="table table-sm table-hover m-0 table-centered dt-responsive nowrap w-100" cellspacing="0"
id="tickets-table">
id="tpa-list-table">
<thead class="bg-light">
<tr>
<th class="font-weight-medium">Name</th>
@ -87,7 +134,10 @@
<!-- end row -->
<script>
document.addEventListener("DOMContentLoaded", function() {
const table = document.getElementById("tickets-table");
const table = document.getElementById("tpa-list-table");
if (!table) {
return;
}
// Create custom dropdown
function createCustomDropdown(row) {
@ -179,10 +229,8 @@
$(document).ready(function() {
$('#tickets-table').DataTable({
// dom: "<'row'<'col-12 d-flex justify-content-between align-items-center'<'datatable-search dataTables_filter'f><'datatable-buttons dt-buttons'B>>>" +
// "<'row'<'col-sm-12'tr>>" +
// "<'row'<'col-sm-5'i><'col-sm-7'p>>",
nhanceListDataTableBeforeInit();
var nhTpaTable = $('#tpa-list-table').DataTable(nhanceMergeListDataTableOptions({
dom: "<'row'<'col-12 d-flex justify-content-between align-items-center'<'datatable-search dataTables_filter'f><'datatable-buttons dt-buttons'B>>>" +
"<'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>>",
@ -225,13 +273,21 @@
emptyTable: '<div class="text-center text-muted">No Data found</div>'
},
paging: true,
});
columnDefs: [
<?php for ($i = 0; $i < $tpa_col_count; $i++) : ?>
{ targets: <?= $i ?>, width: '<?= (int) $tpa_col_width_px[$i] ?>px' },
<?php endfor; ?>
],
}));
nhanceListDataTableAfterInit();
nhanceListDataTableBindAdjust(nhTpaTable);
})
});
const btnExport = document.querySelector("#btnExport");
const tableElement = document.querySelector("#tickets-table");
const tableElement = document.querySelector("#tpa-list-table");
if (btnExport && tableElement) {
btnExport.addEventListener("click", () => {
const obj = new csvExport(tableElement);
const csvData = obj.exportCsv();
@ -248,6 +304,7 @@
URL.revokeObjectURL(url);
}, 500);
});
}
class csvExport {

View File

@ -384,44 +384,46 @@ table.dataTable tbody > tr > td:last-child {
padding-right: 1.35rem !important;
}
table.dataTable thead > tr > th:last-child {
text-align: left;
}
/*
* Action cells: only when the last column contains a Bootstrap dropdown (avoids
* right-aligning numeric/text-only last columns on other listings).
* affecting numeric/text-only last columns that are not row actions).
*/
table.dataTable tbody > tr > td:last-child:has(.dropdown) {
position: relative;
text-align: right;
text-align: left;
}
table.dataTable tbody > tr > td:last-child:has(.dropdown) .btn-group.dropdown {
display: inline-flex;
justify-content: flex-end;
justify-content: flex-start;
}
/* -----------------------------------------------------------------------------
* Action column centered / dropdown (opt-in per row)
* Add class="table-action-cell" on the <td> that wraps .btn-group.dropdown
* (any column position; overrides last-column right-align above).
* Action column left-aligned / dropdown (footer.js adds .table-action-cell)
* ----------------------------------------------------------------------------- */
table.dataTable tbody > tr > td.table-action-cell {
text-align: center !important;
text-align: left !important;
vertical-align: middle !important;
}
table.dataTable tbody > tr > td.table-action-cell .btn-group.dropdown {
display: inline-flex !important;
justify-content: center !important;
justify-content: flex-start !important;
float: none !important;
margin-right: 0 !important; /* Prevent global dropdown margin shifting anchor */
}
table.dataTable tbody > tr > td:last-child.table-action-cell:has(.dropdown),
table.dataTable tbody > tr > td.table-action-cell:has(.dropdown) {
text-align: center !important;
text-align: left !important;
}
table.dataTable tbody > tr > td:last-child.table-action-cell:has(.dropdown) .btn-group.dropdown {
justify-content: center !important;
justify-content: flex-start !important;
}
/* Dropdown menu stacks above row borders / scroll quirks */