Javascript 배열 정렬 샘플 코드
기본 사용법
Sorting ascending // 오름차순 정렬
<script>
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a-b});
for(i=0;i<points.length;i++)
{
document.write(points[i]+",");
}
</script>
Sorting descending // 내림차순 청렬
<script>
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b-a});
for(i=0;i<points.length;i++)
{
document.write(points[i]+",");
}
</script>
적용 샘플
<!doctype html>
<html lang="en">
<head>
<script src="//code.jquery.com/jquery-1.7.2.js"></script>
</head>
<body>
<h1>DIV sorting</h1>
<input type="button" value="Add" id="btnAdd" />
<div id="starting_divs">
<div class="item" data-order="100">
<table>
<tr>
<td>STD</td>
<td>100</td>
</tr>
</table>
</div>
<div class="item" data-order="50">
<table>
<tr>
<td>STD</td>
<td>50</td>
</tr>
</table>
</div>
<div class="item" data-order="500">
<table>
<tr>
<td>STD</td>
<td>500</td>
</tr>
</table>
</div>
<div class="item" data-order="150">
<table>
<tr>
<td>STD</td>
<td>150</td>
</tr>
</table>
</div>
</div>
<script type="text/javascript">
function fnSort()
{
var $sorted_items,
getSorted = function(selector, attrName) {
return $(
$(selector).toArray().sort(function(a, b){
var aVal = parseInt(a.getAttribute(attrName)),
bVal = parseInt(b.getAttribute(attrName));
return aVal - bVal;
})
);
};
$sorted_items = getSorted('#starting_divs .item', 'data-order').clone();
$('#starting_divs').html( $sorted_items );
}
$("#btnAdd").on("click",function(){
var order = (Math.random()*10000).toString().substring(0,3);
$("<div class=\"item\" data-order=\""+order+"\"> \
<table><tr><td>DLX</td><td>"+order+"</td></tr></table> \
</div>").insertAfter(".item:last");
fnSort();
});
</script>
</body>
</html>
데이터형에 따라서 문자열일 경우 비교/리턴 하는부분에서 아래와 같이 변경한다.
<script>
return $(
$(selector).toArray().sort(function(a, b){
var aVal = a.getAttribute('sort-name'), bVal = b.getAttribute('sort-name');
return aVal.localeCompare(bVal);
})
</script>
복합 정렬일 경우 아래와 같이 || 조건으로 비교한다.
<script>
return $(
$(selector).toArray().sort(function(a, b){
var aint = parseInt(a.getAttribute('sort-int')),
bint = parseInt(b.getAttribute('sort-int')),
aName = a.getAttribute('sort-name'),
bName = b.getAttribute('sort-name');
return aint - bint || aName.localeCompare(bName);
})
);
</script>
w3schools Link : https://www.w3schools.com/js/js_array_sort.asp
최종 사용하려고 했던 함수.
<script type="text/javascript">
function fnSort(sortBy)
{
$(".btn.btn-white").removeClass("active");
var $sorted_items,
getSorted = function(selector) {
switch(sortBy){
case "AVAILABLE" :
$(".btn.btn-white").eq(1).addClass("active");
return $(
$(selector).toArray().sort(function(a, b){
var aStatus = a.getAttribute('sort-status'),
bStatus = b.getAttribute('sort-status'),
aPrice = parseInt(a.getAttribute('sort-price')),
bPrice = parseInt(b.getAttribute('sort-price')),
aName = a.getAttribute('sort-name'),
bName = b.getAttribute('sort-name');
return aStatus.localeCompare(bStatus) || aPrice - bPrice || aName.localeCompare(bName);
})
);
break;
case "PRICE" :
case "LOWPRICE" :
$(".btn.btn-white").eq(2).addClass("active");
return $(
$(selector).toArray().sort(function(a, b){
var aPrice = parseInt(a.getAttribute('sort-price')),
bPrice = parseInt(b.getAttribute('sort-price')),
aName = a.getAttribute('sort-name'),
bName = b.getAttribute('sort-name');
return aPrice - bPrice || aName.localeCompare(bName);
})
);
break;
case "HIGHPRICE" :
$(".btn.btn-white").eq(3).addClass("active");
return $(
$(selector).toArray().sort(function(a, b){
var aPrice = parseInt(a.getAttribute('sort-price')),
bPrice = parseInt(b.getAttribute('sort-price')),
aName = a.getAttribute('sort-name'),
bName = b.getAttribute('sort-name');
return bPrice - aPrice || aName.localeCompare(bName);
})
);
break;
case "RATING" :
case "GRADE" :
$(".btn.btn-white").eq(4).addClass("active");
return $(
$(selector).toArray().sort(function(a, b){
var aGrade = parseInt(a.getAttribute('sort-grade')),
bGrade = parseInt(b.getAttribute('sort-grade')),
aName = a.getAttribute('sort-name'),
bName = b.getAttribute('sort-name');
return aGrade - bGrade || aName.localeCompare(bName);
})
);
break;
case "HENM" :
$(".btn.btn-white").eq(5).addClass("active");
return $(
$(selector).toArray().sort(function(a, b){
var aVal = a.getAttribute('sort-name'), bVal = b.getAttribute('sort-name');
return aVal.localeCompare(bVal);
})
);
break;
default :
$(".btn.btn-white").eq(5).addClass("active");
return $(
$(selector).toArray().sort(function(a, b){
var aVal = a.getAttribute('sort-name'), bVal = b.getAttribute('sort-name');
return aVal.localeCompare(bVal);
})
);
break;
}
};
$sorted_items = getSorted('#starting_divs .item').clone();
$('#starting_divs').html( $sorted_items );
}
</script>
