arifal/CKB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix orderable datatable on mutations and products index

Browse Source
This commit is contained in:
arifal
2025-06-16 19:01:11 +07:00
parent aa233eb793
commit b803068d0e
12 changed files with 383 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
resources/views/warehouse_management/mutations/index.blade.php
View File

@@ -50,6 +50,24 @@
@section('styles')
<style>
/* Override any conflicting styles */
#mutations-table thead th {
position: relative !important;
cursor: pointer !important;
user-select: none !important;
}
#mutations-table thead th:not(.sorting_disabled) {
cursor: pointer !important;
}
/* Ensure DataTables classes are applied */
#mutations-table.dataTable thead th.sorting,
#mutations-table.dataTable thead th.sorting_asc,
#mutations-table.dataTable thead th.sorting_desc {
cursor: pointer !important;
background-image: none !important;
}
/* DataTables Sorting Icons */
table.dataTable thead .sorting:before,
table.dataTable thead .sorting:after,
@@ -92,7 +110,25 @@ table.dataTable thead th {
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
cursor: pointer;
cursor: pointer !important;
pointer-events: auto !important;
}
/* Force clickable area */
table.dataTable thead th.sorting:hover,
table.dataTable thead th.sorting_asc:hover,
table.dataTable thead th.sorting_desc:hover {
background-color: #f8f9fa;
}
/* Ensure sorting icons are visible */
table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:before {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
}
</style>
@endsection

52
resources/views/warehouse_management/products/index.blade.php
View File

@@ -2,28 +2,69 @@
@section('styles')
<style>
/* Ensure DataTables sorting icons are visible */
/* DataTables Sorting Icons - Make them visible and clear */
table.dataTable thead .sorting:before,
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_desc:after {
opacity: 0.5 !important;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
opacity: 0.6;
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
}
table.dataTable thead .sorting_asc:before,
/* Sorting icons */
table.dataTable thead .sorting:before {
content: "\f0dc"; /* fa-sort */
opacity: 0.4;
}
table.dataTable thead .sorting_asc:before {
content: "\f0de"; /* fa-sort-up */
opacity: 1;
color: #007bff;
}
table.dataTable thead .sorting_desc:before {
content: "\f0dd"; /* fa-sort-down */
opacity: 1;
color: #007bff;
}
/* Hide default after pseudo elements */
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
opacity: 1 !important;
display: none;
}
/* Make sure table headers are clickable */
table.dataTable thead th {
cursor: pointer;
position: relative;
padding-right: 30px !important; /* Space for sorting icon */
}
table.dataTable thead th.sorting_disabled {
cursor: default;
padding-right: 8px !important;
}
/* Hover effect for sortable columns */
table.dataTable thead th.sorting:hover,
table.dataTable thead th.sorting_asc:hover,
table.dataTable thead th.sorting_desc:hover {
background-color: #f8f9fa;
}
/* Ensure sorting icons are visible on hover */
table.dataTable thead th.sorting:hover:before {
opacity: 0.8;
}
</style>
@@ -57,6 +98,7 @@ table.dataTable thead th.sorting_disabled {
<table class="table table-striped table-bordered table-hover" id="products-table" data-url="{{ route("products.index") }}">
<thead>
<tr>
<th>No.</th>
<th>Kode</th>
<th>Nama</th>
<th>Kategori</th>
@@ -65,6 +107,8 @@ table.dataTable thead th.sorting_disabled {
<th>Aksi</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<!--end: Datatable -->
</div>