JAVASCRIPT[SORT]를 활용하여 DIV 오름차순/내림차순 정렬시키는 소스입니다.
※오름차순, 내림차순을 클릭해 주세요.
※클래스명이 같을 경우 어디든지 적용되게끔 되어 있습니다
※틀이 여러개가 있어도 정상작동 확인.
※안에 추가되어 있는 TAG / DIV에 적용되어있는 CLASS 등 체킹하여 추가되게끔 작업완료
<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>