정렬 상태를 나타내는 아이콘 및 기본값 추가

This commit is contained in:
2025-07-23 16:19:39 +09:00
parent 223100a698
commit 0817686f69
2 changed files with 23 additions and 7 deletions

View File

@ -140,7 +140,7 @@ if (!$authInfo) {
<thead class="table-light">
<tr class="align-middle">
<th class="text-center no-click">No.</th>
<th class="text-center" data-column="product_name" data-order="asc">품목 <span class="sort-icon" data-column="product_name"></span></th>
<th class="text-center" data-column="product_name" data-order="asc">품목 <span class="sort-icon fa fa-sort-up" data-column="product_name"></span></th>
<th class="text-center" data-column="barcode" data-order="asc">바코드 <span class="sort-icon" data-column="barcode"></span></th>
<th class="text-center" data-column="previous_stock" data-order="asc">전일재고 <span class="sort-icon" data-column="previous_stock"></span></th>
<th class="text-center" data-column="production" data-order="asc">생산 <span class="sort-icon" data-column="production"></span></th>

View File

@ -71,18 +71,21 @@ $(document).ready(function() {
function attachThClickEvent() {
$('table').off('click', 'th'); // 기존 이벤트 제거
$('table').on('click', 'th', function() {
// #bakeryTable에만 정렬 이벤트 등록
$('#bakeryTable').on('click', 'th', function() {
if ($(this).hasClass('no-click')) {
return; // no-click 클래스를 가진 th 요소는 클릭 이벤트를 무시하고 이후 코드 실행 안함
return; // no-click 클래스 th는 무시
}
console.log('th clicked:', $(this).data('column')); // 로그 추가
const column = $(this).data('column');
let order = $(this).data('order') || 'asc'; // 기본값 'asc'
let order = $(this).data('order') || 'asc';
order = order === 'asc' ? 'desc' : 'asc';
$(this).data('order', order);
sortTable(column, order); // 테이블 정렬 함수 호출
sortTable(column, order);
});
// 다른 테이블(#bakeryTotalTable 등)은 클릭해도 정렬 이벤트 없음
}
function sortTable(column, order) {
@ -102,9 +105,22 @@ $(document).ready(function() {
$.each(rows, (index, row) => {
tbody.append(row);
// 정렬 후 No. 열의 값을 재설정
$(row).find('td').eq(0).text(index + 1);
});
// 아이콘 업데이트
// 모든 th의 .sort-icon 초기화 (모든 아이콘 초기화)
$('#bakeryTable th .sort-icon').removeClass('fa fa-sort-up fa-sort-down').text('');
// 정렬된 컬럼의 아이콘만 선택하기
const $icon = $(`#bakeryTable th[data-column="${column}"] > .sort-icon`);
if (order === 'asc') {
// FontAwesome 아이콘 클래스 사용 시
$icon.addClass('fa fa-sort-up').text('');
} else {
$icon.addClass('fa fa-sort-down').text('');
}
}
function getColumnIndex(column) {