javascript tablesorter.js 를 추가하여 자동으로 정렬을 할 수 있는 테이블을 생성합니다.
Get Started
- CDN을 통해서 jquery와 tablesorter파일을 추가합니다.
<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>
예제
- 테이블 헤드를 클릭하면 값을 정렬합니다.
Table sorter
| Name | Age | Address |
|---|---|---|
| park | 23 | chung ju si |
| kyung | 34 | chun cheon si |
| seok | 26 | seoul city |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- file import -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.9.1/jquery.tablesorter.min.js"></script>
<style type="text/css">
#sampleTable td:nth-of-type(3){
text-align: right;
padding-right: 0.7em;
}
#sampleTable td:nth-of-type(4){
text-align: right;
padding-right: 0.7em;
}
#sampleTable td:nth-of-type(5){
text-align: right;
padding-right: 0.7em;
}
</style>
</head>
<body>
<h1>Table sorter</h1>
<table id="sampleTable" class="tablesorter">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>park</td>
<td>23</td>
<td>chung ju si</td>
</tr>
<tr>
<td>kyung</td>
<td>34</td>
<td>chun cheon si</td>
</tr>
<tr>
<td>seok</td>
<td>26</td>
<td>seoul city</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function () {
$('#sampleTable').tablesorter();
});
</script>
</body>
</html>
Comments