[jQuery] 테이블 정렬 플러그인 : tablesorter 사용하기

1. 원본 내용

tablesorter 소개에 대해선 http://tablesorter.com/docs/에서 확인 가능.

2. 다운로드 

http://tablesorter.com/docs/#Download에서 다운로드

3. 사용하기

1) 헤더에 플러그인 포함하기

header.php

    




    
    
 
 
 
<-- option -->





});

2) 테이블에 class 값 입력하기

class="tablesorter" 이 클래스명은 변경하면 안된다. ( 적용 안됨 )

index.php

   
 
    
 
        
 
            
ID
            
Auth
            
Date
 
            
User
            
Source IP
            
Remote IP
            
Level
 
        
 
    
 
    
 
      
 
            
ID
            
Auth
            
Date
            
User
            
Source 
            
Remote 
            
Level
        
 
    
 
 
});

3) 스크립트 실행하기

- 기본 실행 방법

main.js

$(function(){
    $("#logtable").tablesorter();
});

- 컬럼별 오름차순 내림차순 적용하기

sortList: [[0,1]] 의 경우 1번째 컬럼의 1: desc 내림차순 (5,4,3,2,1) 정렬한다는 의미

sortList: [[3,1],[5,0]] 의 경우 4번째 컬럼의 desc 내림차순 정렬 , 6번째 컬럼의 asc 오름차순 정렬한다는 의미

$(document).ready(function() { 
    // call the tablesorter plugin 
    $("#logtable").tablesorter({ 
        // sort on the first column, order asc [coulum num,asc=0 or desc=1]
        sortList: [[0,1]] 
    }); 
}); 

});

4) 여러가지 데모 및 예제

데모 확인 하기  http://tablesorter.com/docs/#Demo  

예제 확인 하기 http://tablesorter.com/docs/#Examples