|
|
@@ -5,11 +5,23 @@
|
|
|
<i class="bi bi-gear-fill"></i>
|
|
|
</button>
|
|
|
</div>
|
|
|
- <table class="table" id="tbl" data-table-name="{{ $id }}">
|
|
|
+ <table class="table" id="tbl" data-table-name="{{ $id }}" style="display: none;">
|
|
|
<thead>
|
|
|
<tr>
|
|
|
@foreach($header as $headerName => $headerTitle)
|
|
|
- <th scope="col" class="column_{{ $headerName }} hrader_{{ $headerName }}">{{ $headerTitle }}</th>
|
|
|
+ <th scope="col" class="bg-primary-subtle column_{{ $headerName }} hrader_{{ $headerName }}">
|
|
|
+ <span class="cursor-pointer sort-by-column" data-name="{{ $headerName }}">
|
|
|
+ {{ $headerTitle }}
|
|
|
+ @if(str_starts_with($headerName, $sortBy))
|
|
|
+ @if($orderBy === 'asc')
|
|
|
+ <i class="bi bi-arrow-up"></i>
|
|
|
+ @else
|
|
|
+ <i class="bi bi-arrow-down"></i>
|
|
|
+ @endif
|
|
|
+ @endif
|
|
|
+
|
|
|
+ </span>
|
|
|
+ </th>
|
|
|
@endforeach
|
|
|
|
|
|
</tr>
|
|
|
@@ -56,9 +68,7 @@
|
|
|
let tables = JSON.parse(localStorage.getItem('table_'+tableName));
|
|
|
|
|
|
// on first load create tables object
|
|
|
- if(!tables) {
|
|
|
- tables = {};
|
|
|
- }
|
|
|
+ if(!tables) { tables = {}; }
|
|
|
|
|
|
$.each(tables, function (colName, colStatus) {
|
|
|
if(!colStatus) {
|
|
|
@@ -67,6 +77,8 @@
|
|
|
}
|
|
|
});
|
|
|
|
|
|
+ $('.table').fadeIn();
|
|
|
+
|
|
|
$('.toggle-column').on('change', function () {
|
|
|
let columnName = $(this).attr('data-name');
|
|
|
let columnStatus = $(this).is(':checked');
|
|
|
@@ -83,16 +95,20 @@
|
|
|
}
|
|
|
});
|
|
|
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- $('#table-settings').on('click', function () {
|
|
|
-
|
|
|
+ $('.sort-by-column').on('click', function () {
|
|
|
+ let columnName = $(this).attr('data-name');
|
|
|
+ let currentUrl = new URL(document.location.href);
|
|
|
+ let currentColumnName = currentUrl.searchParams.get('sortBy');
|
|
|
+ currentUrl.searchParams.set('sortBy', columnName);
|
|
|
+ if((currentColumnName !== columnName) || (currentUrl.searchParams.has('order'))) {
|
|
|
+ currentUrl.searchParams.delete('order');
|
|
|
+ } else {
|
|
|
+ currentUrl.searchParams.set('order', 'desc');
|
|
|
+ }
|
|
|
+ document.location.href = currentUrl.href;
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
-
|
|
|
</script>
|
|
|
@endpush
|