[JQuery] 테이블 정렬 (Table sort)

jquery로만 쓸 수 있는 테이블 정렬 하는 코드

테이블 아이디만 변경해서 사용하면 된다.

$(document).ready(function(){
  $('#테이블아이디 th').each(function (column) {
    $(this).click(function() {
      if($(this).is('.asc')) {
        $(this).removeClass('asc');
        $(this).addClass('desc');
        sortdir=-1;

      } else {
        $(this).addClass('asc');
        $(this).removeClass('desc'); sortdir=1;
      }

      $(this).siblings().removeClass('asc');
      $(this).siblings().removeClass('desc');

      var rec = $('#테이블아이디').find('tbody>tr').get();

      rec.sort(function (a, b) {
        var val1 = $(a).children('td').eq(column).text().toUpperCase();
        var val2 = $(b).children('td').eq(column).text().toUpperCase();
        return (val1 < val2)?-sortdir:(val1>val2)?sortdir:0;
      });

      $.each(rec, function(index, row) {
          $('#테이블아이디 tbody').append(row);
      });
    });
 });
});

 

 

*테이블 헤더에 정렬모양? 이미지 추가하기

정렬모양 이미지 추가

1. 알맞은 이미지를 찾은 뒤 컬럼명에 이미지 태그 추가

<th>이름 <img src="resources/tablesorter.png"></th>

 

2. js 사용하여 상태 별 이미지 변경

$(document).ready(function(){
  $('#테이블아이디 th').each(function (column) {
    $(this).click(function() {
      if($(this).is('.asc')) {		// 현재 오름차순인 경우 
        $(this).removeClass('asc');
        $(this).addClass('desc');	// 내림차순으로 변경
        $(this).children().attr('src', "resources/img.png");	// 이미지 src 수정
        sortdir=-1;

      } else {	// 현재 오름차순 아닌 경우
        $(this).addClass('asc');	// 오름차순으로 변경
        $(this).removeClass('desc'); sortdir=1;
        $(this).children().attr('src', "resources/img.png");	// 이미지 src 수정
      }

      $(this).siblings().removeClass('asc');
      $(this).siblings().removeClass('desc');

      var rec = $('#테이블아이디').find('tbody>tr').get();

      rec.sort(function (a, b) {
        var val1 = $(a).children('td').eq(column).text().toUpperCase();
        var val2 = $(b).children('td').eq(column).text().toUpperCase();
        return (val1 < val2)?-sortdir:(val1>val2)?sortdir:0;
      });

      $.each(rec, function(index, row) {
          $('#테이블아이디 tbody').append(row);
      });
    });
 });
});