프론트에서 계산한 값으로 정렬

[입출고 총액 프론트에서 계산함]

 

총액 정렬 문제 해결 방법

문제 원인:

• totalAmount는 실제 데이터베이스 컬럼이 아니라 프론트엔드에서 transQty * unitPrice로 계산되는 값
• 서버에서 이 필드로 정렬하려고 하면 오류 발생

해결 방법:

1. 클라이언트 사이드 정렬 함수 추가

 

javascript

function sortTableByTotalAmount(data, order) {
    return data.sort((a, b) => {
        const totalA = (parseFloat(a.transQty) || 0) * (parseFloat(a.unitPrice) || 0);
        const totalB = (parseFloat(b.transQty) || 0) * (parseFloat(b.unitPrice) || 0);
        return order === 'asc' ? totalA - totalB : totalB - totalA;
    });
}

2. 테이블 로드 함수에서 총액 정렬 감지 및 처리

 

javascript

// 총액 정렬인 경우 서버에서 정렬하지 않고 클라이언트에서 처리
let serverSortBy = sortBy;
let serverSortDirection = sortDirection;
let isClientSideSort = false;

if (sortBy === 'totalAmount') {
    // 총액 정렬은 클라이언트에서 처리하므로 서버에는 기본 정렬로 요청
    serverSortBy = 'invTransIdx';
    serverSortDirection = 'desc';
    isClientSideSort = true;
}

3. 정렬 화살표 업데이트 함수 분리

 

javascript

function updateSortArrows(sortBy, sortDirection) {
    // 모든 정렬 화살표 초기화
    document.querySelectorAll('#receivingTable thead th .sort-arrow').forEach(arrow => {
        arrow.textContent = '↓';
        arrow.classList.remove('active');
    });

    // 현재 정렬 컬럼의 화살표 활성화
    const currentThArrow = document.querySelector(`#receivingTable thead th[data-sort-by="${sortBy}"] .sort-arrow`);
    if (currentThArrow) {
        currentThArrow.textContent = sortDirection === 'asc' ? '↑' : '↓';
        currentThArrow.classList.add('active');
    }
}

변경 사항:

1. inbound.js와 outbound.js 모두에 동일한 로직 적용
2. 총액 정렬 시에만 클라이언트에서 처리하고, 다른 정렬은 서버에서 처리
3. 정렬 화살표가 올바르게 표시되도록 수정
4. 검색 초기화 시에도 정렬 화살표 올바르게 초기화