jquery를 이용한 ajax 테이블 정렬 순서변경

jquery를 이용한 ajax 테이블 정렬 순서변경

오름차순과 내림차순 방법으로 모두 정렬하려면 이번엔 다른 키코드를 삽입해야 한다. 이제까지는 오름차순만 사용했지만 이번에 변수를 넣어서 클릭시 차순이 변화되도록 해보자.

 if (a.sortKey < b.sortKey) return -1;
 if (a.sortKey > b.sortKey) return 1;
 return 0;

저번에 보았던 비교 값을 이용한 정렬이다. 만약 숫자가 작다면 -1 값을 반환 크다면 1을 반환 상관없으면 0을 반환하도록 되어있다. 이를이용하여 오름차순으로 정렬되게 했다. 자그럼다음코드를 보자

 if (a.sortKey < b.sortKey) return 1;
 if (a.sortKey > b.sortKey) return -1;
 return 0;

이 경우는 단지 결과값에 1과 -1을 바꾸어 주었을뿐이다.따라서 그결과값도 내림차순으로 나온다,.이번엔 반환하는값을 클릭에 따라다르게 하여 오름차순, 내림차순을 보두 고려해보자

 var sortDirection = 1;
 if ($header.is('.sorted-asc')) {
 sortDirection = -1;
  }

반환하는 값을 위하여 변수를 sortDirection으로 지정해주었다.기본값을 1로 정해주었고 그상태가 반대라면 -1로 주도록되어있다.클래스명을 sorted-asc(오름차순의 경우),sorted-desc(내림차순의 경우)로 주도록 하겠다.

 $table.find('th').removeClass('sorted-asc')
    .removeClass('sorted-desc');
      if (sortDirection == 1) {
       $header.addClass('sorted-asc');
          }
      else {
       $header.addClass('sorted-desc');
        }

마지막으로 적용한 것이다.th엘리먼에서 앞에미리 기본값으로 sorted-asc를 붙인것을 지우고 sorted-desc을 붙인다. 현재값에 따라 오름차순 내림차순으로 바뀌게 된다.

요약

그전과 차이점은 단순 리턴하는 값을 변수하나를주어서 다르게 했을 뿐이다.

• 먼저 변수이름을 지정한다.sortDirection 이라고 정했다.
• 반환될 기본값을 결정한다 1
• 클릭시 변할 클래스명을 정한다.sorted-asc(오름차순의 경우),sorted-desc(내림차순)
• 현재값이 sorted-asc 이면 sorted-desc으로
• 반대로 현재값이 sorted-desc 이면 sorted-asc으로 되도록 정한다.

완선된 예제를 보려면 여기로http://sianasiatiger.cafe24.com/study/T_usetableArry.html