html table sort

table sort jquery 로 구글 검색을 해보면, html table 을 정렬하는 jQuery plugin 이 많은 것을 알 수 있다.

그러나 이들 대부분의 table 정렬 plugin은 th 헤더가 필요하다.

내가 정렬하고자 하는 html table 은 thead 만 있는 테이블과 tbody 만 있는 테이블을 마치 하나의 테이블인 것처럼 붙여놓은 것이다.

페이지 나누기를 하지 않고, 내용이 길면 스크롤로 생기게 하려고 한 것이다.

그러면서 헤더는 스크롤 되지 않고 항상 보이게 하려고 이런 구조를 쓰게 되었다.

그래서 이 html table을 정렬하려면 만들어진 기존의 jQuery plugin 은 사용을 못할것 같고, 만들어서 사용해야 할 것 같다.

직접 구현한 소스도 봤는데, 생각보다 복잡하지 않았다.

[참고] 

jquery를 이용한ajax 테이블 정렬  ( http://siana.tistory.com/112 )

http://stackoverflow.com/questions/15622874/sort-table-by-price-column

http://stackoverflow.com/questions/3160277/jquery-table-sort

이렇게 table을 2개로 나누어 쓰다보니 table 안에 쓰여지는 내용에 따라 본문 테이블의 컬럼 너비가 자동 조정되는데, 헤더 테이블의 컬럼은 변하지 않아서 헤더와 본문의 컬럼 너비가 따로 노는 현상이 발생했다.

table 에 데이터를 모두 넣은 다음에 jQuery 로 컬럼 너비를 동일하게 해주려고 하다가 로직이 생각보다 많이 복잡하고, 고려해야 할 사항도 많았다.

그래서 table 태그에 아래 style을 줘서 차라리 테이블 너비를 고정하는 방법을 썼다.

style="table-layout:fixed; word-break:break-all;"

[참고] http://www.homejjang.com/09/table_layout.php