TableSorter.js 로 Sorting 개발하기
6/28 개발일기
홈페이지 작업이 막바지에 이르면서, 서버 개발단보다 프론트 쪽을 다룰 일이 더 많아졌다. 최근 jQuery 라이브러리들이 너무 잘 되어 있어서 세세한 부분까지 직접 개발하지 않고 라이브러리를 써도 된다. 이번에는 테이블 Sorting 기능을 쉽게 구현해둔 라이브러리를 찾아 적용했다. (Filter 기능도 가능함)
라이브러리명은 TableSorter.js 프론트에서 있는 데이터를 추출해 Sorting 하는 거라, DB까지 왔다갔다 하지 않아도 되니 속도도 매우 빠르고 안정적이다. (공식사이트 : http://tablesorter.com/docs/)
코드는 간단하다. TableSorter.js 를 입력 후, Sorting 기능 생성이 필요한 table을 아래와 같이 select 해주면 된다.
$(function() {
$("#table").tablesorter();
}
끝! 참, Table에 <thead>와 <tbody>가 정확히 작성되어 있어야 정상 작동한다.
<thead>
<tr>
<th> ... </th>
</tr>
</thead>
<tbody>
<tr>
<td>...</td>
</tr>
</tbody>
우리 시스템의 경우 1,000,000원 형태로 돈이 들어가는 컬럼이 있었는데, 이 경우에 보여지는 건 String 이지만 Sorting은 Integer 로 해야했기 때문에 아래와 같이 Custom Sorting을 추가적으로 설정해주었다.
$.tablesorter.addParser({
id: 'price',
is: function(s) {
return false; //이렇게 해야 Default Parsing이 적용되지 않는다
},
format: function(s) {
return s.replace('원','').replace(/,/g,''); //원과 천원단위로 찍어둔 쉼표를 제거하고 숫자만 리턴
},
type: 'numeric'
});
$(function() {
$("table").tablesorter({
header:{ 3: { sorter:'price' } } //3번째 컬럼의 sorter ID를 price로 명시한다.
});
});
그 외 필터 기능도 가능하다. 필터 기능을 사용하려면 tablesorter.widgets.js 를 추가로 import 하고 설정을 추가해주어야 한다. 위 설정에서 하위 .tablesorter() 부분에 widgets를 아래와 같이 명시한다.
$("table").tablesorter({
widgets: ['filter'],
header:{ 3: { sorter:'price' , filter:false} } //3번째 컬럼의 sorter ID를 price로 명시한다.
});
만약 filter 를 적용하고 싶지 않은 컬럼엔 위와 같이 filter 여부를 false로 설정하면 된다.
※ 이번 프로젝트를 진행하면서 적용했거나 이전에 적용했던
jQuery 라이브러리들을 슬라이드로 정리해보았습니다. 필요하신 분들은 참고하세요.
