• HTML
  • JS
  • J볃교

JAVASCRIPT[SORT]를 활용하여 TABLE 오름차순/내림차순 정렬시키기

2019-07-08 781

설명

  • 카카오톡 링크

JAVASCRIPT[SORT]를 활용하여 TABLE 오름차순/내림차순 정렬시키는 소스입니다.

※오름차순, 내림차순을 클릭해 주세요.
※모든 테이블에서 적용되게끔 되어 있습니다
※테이블이 여러개가 있어도 정상작동 확인.

소스실행 현황

소스보기( X표시가 나타나면 무시하셔도 됩니다! )

<style type="text/css">
	.new_table {width:100%; }
	.new_table caption {font-size:0; position:absolute; left:-9999px; top:-9999px; line-height:0}
	.new_table th {font-size:14px; font-weight:400; padding:16px 0; background:#fafafa; border-bottom:1px solid #ddd }
	.new_table th button {border:0 none; display:inline-block; padding:5px 5px 6px; font-size:11px; margin:0 2px; border-radius:3px; cursor:pointer; background:#112f41; color:#fff; outline:0 none}
	.new_table th button.active {background:#ed553b; color:#fff}
	.new_table td {font-size:14px; font-weight:400; text-align:center !important; padding:14px 0; border-bottom:1px solid #ddd }
</style>
<div class="table_box">
	<div class="mobile_table_view">
		<a href="javascript:;" class="none_click">
		<div class="align_middle">
			<div class="align_middle_center">
				<p>
					좌우로 움직여 주세요.
					<span>※ 한번 터치시 해당 배경은 없어집니다~!</span>
				</p>
			</div>
		</div>
		</a>
	</div>
	<div class="table_inner_box wd1280">
		<table cellpadding="0" cellspacing="0" class="new_table">
			<caption>
				정렬하기
			</caption>
			<colgroup>
				<col style="width:12%" />
				<col style="width:12%" />
				<col style="width:12%" />
				<col style="width:12%" />
				<col style="width:12%" />
				<col style="width:12%" />
			</colgroup>
			<thead>
				<tr>
					<th>순서<button class="up">오름차순</button><button class="down">내림차순</button></th>
					<th>이름<button class="up">오름차순</button><button class="down">내림차순</button></th>
					<th>나이<button class="up">오름차순</button><button class="down">내림차순</button></th>
					<th>조회수<button class="up">오름차순</button><button class="down">내림차순</button></th>
					<th>성별<button class="up">오름차순</button><button class="down">내림차순</button></th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>1</td>
					<td>가나다라</td>
					<td>15</td>
					<td>999</td>
					<td>남</td>
				</tr>
				<tr>
					<td>2</td>
					<td>홍길동</td>
					<td>22</td>
					<td>300</td>
					<td>여</td>
				</tr>
				<tr>
					<td>3</td>
					<td>번짝</td>
					<td>35</td>
					<td>407</td>
					<td>남</td>
				</tr>
				<tr>
					<td>4</td>
					<td>뤠알진심</td>
					<td>26</td>
					<td>301</td>
					<td>남</td>
				</tr>
				<tr>
					<td>5</td>
					<td>소스창고</td>
					<td>75</td>
					<td>555</td>
					<td>여</td>
				</tr>
				<tr>
					<td>6</td>
					<td>떠들리셔</td>
					<td>46</td>
					<td>333</td>
					<td>남</td>
				</tr>
				<tr>
					<td>7</td>
					<td>오로로로롱</td>
					<td>31</td>
					<td>123</td>
					<td>여</td>
				</tr>
				<tr>
					<td>8</td>
					<td>우오오오오</td>
					<td>24</td>
					<td>754</td>
					<td>여</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>

<div class="table_box">
	<div class="mobile_table_view">
		<a href="javascript:;" class="none_click">
		<div class="align_middle">
			<div class="align_middle_center">
				<p>
					좌우로 움직여 주세요.
					<span>※ 한번 터치시 해당 배경은 없어집니다~!</span>
				</p>
			</div>
		</div>
		</a>
	</div>
	<div class="table_inner_box wd1280">
		<table cellpadding="0" cellspacing="0" class="new_table">
			<caption>
				정렬하기
			</caption>
			<colgroup>
				<col style="width:12%" />
				<col style="width:12%" />
				<col style="width:12%" />
				<col style="width:12%" />
				<col style="width:12%" />
				<col style="width:12%" />
			</colgroup>
			<thead>
				<tr>
					<th>순서<button class="up">오름차순</button><button class="down">내림차순</button></th>
					<th>이름<button class="up">오름차순</button><button class="down">내림차순</button></th>
					<th>나이<button class="up">오름차순</button><button class="down">내림차순</button></th>
					<th>조회수<button class="up">오름차순</button><button class="down">내림차순</button></th>
					<th>성별<button class="up">오름차순</button><button class="down">내림차순</button></th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>1</td>
					<td>가나다라</td>
					<td>15</td>
					<td>999</td>
					<td>남</td>
				</tr>
				<tr>
					<td>2</td>
					<td>홍길동</td>
					<td>22</td>
					<td>300</td>
					<td>여</td>
				</tr>
				<tr>
					<td>3</td>
					<td>번짝</td>
					<td>35</td>
					<td>407</td>
					<td>남</td>
				</tr>
				<tr>
					<td>4</td>
					<td>뤠알진심</td>
					<td>26</td>
					<td>301</td>
					<td>남</td>
				</tr>
				<tr>
					<td>5</td>
					<td>소스창고</td>
					<td>75</td>
					<td>555</td>
					<td>여</td>
				</tr>
				<tr>
					<td>6</td>
					<td>떠들리셔</td>
					<td>46</td>
					<td>333</td>
					<td>남</td>
				</tr>
				<tr>
					<td>7</td>
					<td>오로로로롱</td>
					<td>31</td>
					<td>123</td>
					<td>여</td>
				</tr>
				<tr>
					<td>8</td>
					<td>우오오오오</td>
					<td>24</td>
					<td>754</td>
					<td>여</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>

<script type="text/javascript">
	// 테이블 재 세팅
	var table_html;
	function re_table(line, cols, table_position) {
		table_html = "";
		for(var i = 0; i<line; i++) {
			table_html += "<tr>";
			for(var j = 0; j<cols; j++) {
				table_html += "<td>"+new_array[i][j]+"</td>";
			}
			table_html += "</tr>";
		}
		$(table_position.find("tbody")).html(table_html);
	}

	// 정렬
	$(document).ready(function() {
		var text_array;

		$("button.up, button.down").on("click", function() {
			var $this = $(this);
			var $this_table = $this.parents("table");
			var $this_start_number = $this.parent().index();
			
			var table_th_length = $this.parents("table").find("thead th").length; //테이블 칸의 갯수
			var table_tr_length = $this.parents("table").find("tbody tr").length; //테이블 내용 줄 갯수

			new_array = new Array();
			for(var i = 0; i<table_tr_length; i++) {
				new_array[i] = [];
				for(var j = 0 ; j < table_th_length; j++) {
					text_array = $this_table.find("tbody tr").eq(i).find("td").eq(j).text(); // 값땡겨오는거
					new_array[i][j] = text_array;
				}	
			}

			//테이블 클래스 active 지정
			$this_table.find("th button").removeClass("active");
			$this.addClass("active");

			/* 정렬 */
			new_array.sort(function (a, b) { 
				if($this.hasClass("up")) {
					return a[$this_start_number] < b[$this_start_number] ? -1 : a[$this_start_number] > b[$this_start_number]? 1 : 0;  
				} else {
					return a[$this_start_number] > b[$this_start_number] ? -1 : a[$this_start_number] < b[$this_start_number]? 1 : 0;  
				}
			});

			//값이 들어오는지 확인 소스
			//console.log(new_array);

			$this_table.find("tbody").empty();
			re_table(table_tr_length, table_th_length, $this_table);
		});
	})
</script>