[Jquery] 테이블 오름차순 정렬

테이블의 TD를 클릭시 오름차순으로 정렬되는 소스코드
간혹 처음 접속할때 이벤트가 끊기는 현상이 간헐적으로

테이블 정렬 모듈

function SetTableSort(Target, SelectedHeaderTd){
    //Target : 정렬할 Tr들을 묶고 있는 태그
    //SelectedHeaderTd : 클릭된 헤더의 td

    let Order;
    if($(SelectedHeaderTd).h_asClass('upper')){
       _ $(SelectedHeaderTd).removeClass('upper');
        $(SelectedHeaderTd).addClass('lower');
        Order = 'lower';
    }
    else if($(SelectedHeaderTd).hasClass('lower')){
        $(SelectedHeaderTd).removeClass('lower');
        $(SelectedHeaderTd).addClass('upper');
        Order = 'upper'
    }
    else{
        $(SelectedHeaderTd).addClass('upper');
        Order = 'upper'
    }

    let CriterionIndex = $(SelectedHeaderTd).index();
    let TargetTable = $(Target);
    // console.log(TargetTable);
    let TargetTrList = TargetTable.children('tr');

    TargetTrList.sort(function(a, b){
        let val1 = a.cells[CriterionIndex].innerText;
        let val2 = b.cells[CriterionIndex].innerText;

        if(Order === 'upper'){
            if(val1 < val2){
                return -1;
            }
            else if(val1 > val2){
                return 1;
            }
            else{
                return 0;
            }
        }
        else if(Order === 'lower'){
            if(val1 > val2){
                return -1;
            }
            else if(val1 < val2){
                return 1;
            }
            else{
                return 0;
            }
        }

    });

    TargetTable.append(TargetTrList);
}

함수화

//테이블 정렬 클릭 이벤트를 부여하는 함수
function AddTableSortEvent(HeaderTable, Target){
    //HeaderTd : 클릭될 헤더의 td(예: #TableId td)
    //Target : 정렬할 Tr들을 묶고 있는 태그(예: #TableId tbody)
    let HeaderTd = HeaderTable;
    $(document).off('click', HeaderTd).on('click', HeaderTd, function(){
        SetTableSort(Target, this);
    })
}

사용방법

   AddTableSortEvent('#tablesorter thead tr th', '#license_td');