테이블 데이터 정렬
화면에 보이는 데이터를 정렬 하고 싶을때가 있습니다.
(혹은 그런 기획이 오면 해야죠)
▼엑셀에 사용하는 그 기능 처럼요
하지만 웹에서는 DB에 order by 명령어를 받아
새로고침 하여 뿌리는 경우가 많아 느리기도 하고
굳이 서버를 다녀와야 할까 싶죠
그럴때 사용할수 있는 플로그인을 하나 소개 하겠습니다.
▼해당 사이트에 tabersorter 라는 플로그인
http://tablesorter.com/
오늘은 해당 사이트에 나와 있는 내용을 익스프레스하게 압축하여 설명해보겠습니다.
Jquery로 테이블에 있는 데이터를 거침없이 정렬 해봅시다.
▼jQuery와 tablesorter를 참조한다.
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="jquery.tablesorter.min.js"></script>
▼적용 하고 싶은 Table 속성에 .tablesorter() 추가한다.
$(document).ready(function(){
$("#gcTable").tablesorter();
});
▼테이블에 속성은 아래와 같습니다.
<table >
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
▼그리고 아래가 소스의 합
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="jquery.tablesorter.min.js"></script>
<link rel="stylesheet" href="blue_style.css" type="text/css">
<link rel="stylesheet" href="green_style.css" type="text/css">
</head>
<script type="text/javascript">
<!--
$(document).ready(function(){
$("#gcTable").tablesorter();
});
//-->
</script>
<table id="gcTable" class="tablesorter">
<thead>
<tr>
<th>이름</th>
<th>나이</th>
</tr>
</thead>
<tbody>
<tr>
<td>홍길동</td>
<td>21</td>
</tr>
<tr>
<td>사임당</td>
<td>40</td>
</tr>
<tr>
<td>이이</td>
<td>90</td>
</tr>
<tr>
<td>이도</td>
<td>50</td>
</tr>
<tr>
<td>이황</td>
<td>80</td>
</tr>
<tr>
<td>이순신</td>
<td>54</td>
</tr>
<tr>
<td>고코더</td>
<td>88</td>
</tr>
<tr>
<td>개발자</td>
<td>9</td>
</tr>
</tbody>
</table>
▼압축파을일 열어 Gc.html을 열어보세요
gocoder_테이블정렬.7z▼압축파을일 열어 Gc.html을 열어보세요
아래와 같이 이용 가능합니다.
마무리
플로그인의 의존한다고 생각하지마세요.
스스로 플로그인을 잘써야 만들수도 있습니다.
'IT_Developers > Javascript' 카테고리의 다른 글
| jQuery - 긴 텍스트 ... 으로 줄이기 / dotdotdot (0) | 2017.12.24 |
|---|---|
| JavaScript - 프론트에서 서버 시간 얻기 (0) | 2017.12.22 |
| jQuery - 제이쿼리로 QR코드 만들기 (0) | 2017.12.02 |
| jQuery | Plugin - select 박스 검색 가능하게 (3) | 2017.11.02 |
| Javascript - 아이폰,안드로이드 기기 체크 (0) | 2017.11.02 |
댓글