기획서 보다보니 테이블 헤더별로 정렬기능이 있었다. 찾아보니 쉽게 정렬을 해주는 js 라이브러리가 있었다.
확인해 보니 무료였다. 어드민에서 쓸꺼니가 괜찮겠지?
tablesorter.js document
https://mottie.github.io/tablesorter/docs/index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.9.1/jquery.tablesorter.min.js"></script>
<style>
table {
width: 100%;
border: 1px solid #444444;
border-collapse: collapse;
}
th,
td {
border: 1px solid #444444;
padding: 10px;
}
</style>
</head>
<body>
<table class="table1" id="sampleTable">
<thead>
<tr>
<th>숫자</th>
<th>과일</th>
<th>과자</th>
<th>영문</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>사과</td>
<td>초코파이</td>
<td>A</td>
</tr>
<tr>
<td>2</td>
<td>귤</td>
<td>스윙칩</td>
<td>B</td>
</tr>
<tr>
<td>3</td>
<td>배</td>
<td>포카칩</td>
<td>C</td>>
</tr>
<tr>
<td>4</td>
<td>망고</td>
<td>누네띠네</td>
<td>D</td>
</tr>
<tr>
<td>5</td>
<td>수박</td>
<td>칙촉</td>
<td>E</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function() {
$('#sampleTable').tablesorter();
});
</script>
</body>
</html>
댓글