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

1. 원본 내용

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

2. 다운로드 

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

3. 사용하기

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

header.php

?

1 2 3 4 5 6 7 8 9 10 11 12

<title>Security</title>     <meta charset="utf-8">  <script language="JavaScript" src="js/_jquery.tablesorter/jquery-latest.js"></script>  <script language="JavaScript" src="js/_jquery.tablesorter/jquery.tablesorter.min.js"></script>  <script language="JavaScript" src="js/_jquery.tablesorter/jquery.tablesorter.js"></script><link rel="stylesheet" href="../jquery-tablesorter/themes/blue/style.css" type="text/css"> <-- option --> <link rel="stylesheet" href="../jquery-tablesorter/themes/green/style.css" type="text/css">         });

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

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

index.php

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

<table id="logtable" class="tablesorter">     <thead>         <tr>             <th>ID</th>             <th>Auth</th>             <th>Date</th>             <th>User</th>             <th>Source IP</th>             <th>Remote IP</th>             <th>Level</th>         </tr>     </thead>     <tbody>       <tr>             <td>ID</td>             <td>Auth</td>             <td>Date</td>             <td>User</td>             <td>Source </td>             <td>Remote </td>             <td>Level</td>         </tr>     </tbody> </table> });

3) 스크립트 실행하기

- 기본 실행 방법

main.js

?

1 2 3

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

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

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

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

?

1 2 3 4 5 6 7 8 9

$(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