jQuery tablesorter 플러그인을 사용하여 table sort

Intro

안녕하세요~ 삽질하는 프로그래머 통통만두입니다.

제 평생에 웹은 개발을 하지 않을 줄 알았더니 웹 개발을 하고 있습니다. ^^;

웹쪽 프로젝트를 진행하는 것이 처음이라 여러모로 헤메기도 하고 이름에 걸맞게 삽질을 하고 있는데요,

이번에는 table column sort 를 다루어 볼까 합니다. 사실 제가 나중에 참고하고자 포스팅을 하는 목적이 더 크네요. jQuery의 tablesorter 플러그인을 사용하게 된 과정이 있는데 각설하고 본론으로 들어가겠습니다.

jQuery Plugin Download

먼저 해당 플러그인을 사용하려면 플러그인을 설치하고 웹서버에 js파일을 업로드한 다음 사용해야 합니다.

http://tablesorter.com/docs/

해당 사이트에서 개요와 함께 다운로드, 예제를 함께 보실 수 있으니 참조하시기 바랍니다.

사용법

<script type="text/javascript" src="${contextPath}/js/plugin/jquery-tablesorter/jquery.tablesorter.js"></script>

우선 위와 같이 추가를 해줍니다. 이 때, src의 위치는 각 웹서버에 맞게끔 수정하셔서 사용하시면 됩니다.

그러고나서 아래와 같이 이벤트를 걸어주면 끝이납니다.

아래와 코드에서 사용된 #tblResult 는 jQuery의 tablesorter 플러그인을 적용할 table의 id 입니다.

<script type="text/javascript">
  $(document).ready(function() {
    $("#tblResult").tablesorter();
  });
</script>

앗! 하다보니 숫자를 정렬하는데 숫자임에도 불구하고 문자로 인식해서 제대로 sort 가 되지 않은 문제가 있었습니다. 고민도 잠시.. 역시나 jQuery는 이 모든 걸 지원해줍니다!

$.tablesorter.addParser({
  id: 'NumberSort',
  is:function(s){return false;},
  format: function(s) {return s.replace(/,/g,'');},
  type: 'numeric'
});

$("#tblResult").tablesorter(
        {
          headers : {
            0 : {sorter : false},
            9 : {sorter : 'NumberSort'},
            10 : {sorter : 'NumberSort'},
            11 : {sorter : 'NumberSort'},
            12 : {sorter : 'NumberSort'}
          }
        }
);

소스보면 어떻게 자신의 소스에 적용해야 하는지 감이 오시죠?

Outro

사실 jQuery를 찾지 못했다면 인터넷에서 또는 길고 복잡하고 재사용성이 떨어지는 코드를 복사해와서 사용했겠지만 tablesorter 이라는 매우 우수하고 간편한 플러그인을 발견해서 참으로 다행입니다.

table sort 기능을 몇 주 전에 추가하려고 했는데 그 때는 이 것이 눈에 들어오지 않더니 ㅠ_ㅠ

부족하나마 도움이 되었길 바랍니다. 

감사합니다.