• HTML
  • JS
  • J볃교

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

2019-07-10 514

설명

  • 카카오톡 링크

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

※오름차순, 내림차순을 클릭해 주세요.
※클래스명이 같을 경우 어디든지 적용되게끔 되어 있습니다
※틀이 여러개가 있어도 정상작동 확인.
※안에 추가되어 있는 TAG / DIV에 적용되어있는 CLASS 등 체킹하여 추가되게끔 작업완료

소스실행 현황

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

<style type="text/css">
	.div_table {}
	.div_table .table_head {}
	.div_table .table_head 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}
	.div_table .table_head button.active {background:#ed553b; color:#fff}
	.div_table .table_head > div > div { font-size: 15px; font-weight: 300; color: #fff; background: #f2849e; padding: 7px 5px 9px; }
	.div_table .table_body > div > div { font-size: 14px; font-weight: 300; color: #404004; padding: 5px 5px 7px; line-height: 1.3em; border: 1px solid #dfdfdf; border-left:0; border-top:0	}
	.div_table .table_body > div > div:first-child {border-left:1px solid #dfdfdf}
	.div_table .table_line {display:inline-table; width:100%}
	.div_table .table_line > div {display:table-cell; width:20%; text-align:center}
	.div_table .table_line > div.red {color:red}
	.div_table .table_line > div .strong {font-weight:700}
</style>

<div class="div_table">
	<div class="table_head">
		<div class="table_line">
			<div>
				순서<button class="up">오름차순</button><button class="down">내림차순</button>
			</div>
			<div>
				이름<button class="up">오름차순</button><button class="down">내림차순</button>
			</div>
			<div>
				나이<button class="up">오름차순</button><button class="down">내림차순</button>
			</div>
			<div>
				조회수<button class="up">오름차순</button><button class="down">내림차순</button>
			</div>
			<div>
				성별<button class="up">오름차순</button><button class="down">내림차순</button>
			</div>
		</div>
	</div>
	<div class="table_body">
		<div class="table_line">
			<div>
				1
			</div>
			<div>
				<span class="strong">
					홍길동
				</span>
			</div>
			<div>
				15
			</div>
			<div>
				999
			</div>
			<div class="red">
				남
			</div>
		</div>
		<div class="table_line">
			<div>
				2
			</div>
			<div>
				<span class="strong">
					손오공
				</span>
			</div>
			<div>
				30
			</div>
			<div>
				423
			</div>
			<div class="red">
				남
			</div>
		</div>
		<div class="table_line">
			<div>
				3
			</div>
			<div>
				<span class="strong">
					가나다라
				</span>
			</div>
			<div>
				45
			</div>
			<div>
				123
			</div>
			<div class="red">
				여
			</div>
		</div>
		<div class="table_line">
			<div>
				4
			</div>
			<div>
				<span class="strong">
					테스트
				</span>
			</div>
			<div>
				10
			</div>
			<div>
				999
			</div>
			<div class="red">
				남
			</div>
		</div>
		<div class="table_line">
			<div>
				5
			</div>
			<div>
				<span class="strong">
					스타일
				</span>
			</div>
			<div>
				70
			</div>
			<div>
				678
			</div>
			<div class="red">
				남
			</div>
		</div>
	</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 += "<div class='table_line'>";
			for(var j = 0; j<cols; j++) {
				if(new_array[i][j][1] != "0") {
					table_html += "<div class="+new_array[i][j][1]+">"+new_array[i][j][2]+"</div>";
				} else {
					table_html += "<div>"+new_array[i][j][2]+"</div>";
				}
			}
			table_html += "</div>";
		}
		$(table_position.find(".table_body")).html(table_html);
	}


	$(document).ready(function() {
		var text_array;

		$("button.up, button.down").on("click", function() {
			var $this = $(this);
			var $this_table = $this.closest(".div_table");
			var $this_start_number = $this.parent().index();
			
			var table_head_div_length = $this.closest(".div_table").find(".table_head > div > div").length; //테이블 칸의 갯수
			var table_body_div_length = $this.closest(".div_table").find(".table_body > div").length; //테이블 내용 줄 갯수
			
			new_array = new Array();

			var number = 0;
			for(var i = 0; i<table_body_div_length; i++) {
				number = 0;
				new_array[i] = [];
				for(var j = 0 ; j < table_head_div_length; j++) {
					text_array = $.trim($this_table.find(".table_body > div").eq(i).find(" > div").eq(j).text());
					new_html = $this_table.find(".table_body > div").eq(i).find(" > div").eq(j).html();
					if($this_table.find(".table_body > div").eq(i).find(" > div").eq(j).attr("class")) {
						new_class = $this_table.find(".table_body > div").eq(i).find(" > div").eq(j).attr("class");
						text_array = [text_array, new_class, new_html];
					} else {
						text_array = [text_array, '0', new_html];
					}
					new_array[i][j] = text_array;
				}	
			}

			//테이블 클래스 active 지정
			$this_table.find(".table_head div 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(".table_body").empty();
			re_table(table_body_div_length, table_head_div_length, $this_table);
		});
	});
</script>