본문 바로가기
IT_Developers/Javascript

jQuery - 게시판 정렬하기 / Table sort

by 고코더 2017. 12. 5.



테이블 데이터 정렬


화면에 보이는 데이터를 정렬 하고 싶을때가 있습니다.
(혹은 그런 기획이 오면 해야죠)

▼엑셀에 사용하는 그 기능 처럼요




하지만 웹에서는 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을 열어보세요


▼압축파을일 열어 Gc.html을 열어보세요
아래와 같이 이용 가능합니다.




마무리

플로그인의 의존한다고 생각하지마세요. 
스스로 플로그인을 잘써야 만들수도 있습니다.




댓글