JavaScript
[javascript] 목록 엘리먼트에 오름차순/내림차순 정렬 기능 넣기(with sort 함수)
dev.mk
2022. 7. 2. 23:03
반응형
중요 포인트는
1. 배열을 자바스크립트 sort메소드로 정렬한다.
2. 제이쿼리로 엘리먼트를 그린다.
데이터의 형태
let dummy = [
{'dt' : "2022-01-04", 'team' : 'C'}
, {'dt' : "2022-03-04", 'team' : 'B'}
, {'dt' : "2022-02-01", 'team' : 'C'}
, {'dt' : "2022-04-04", 'team' : 'D'}
, {'dt' : "2022-01-04", 'team' : 'A'}
, {'dt' : "2022-05-04", 'team' : 'A'}
, {'dt' : "2022-06-04", 'team' : 'D'}
, {'dt' : "2022-07-02", 'team' : 'C'}
]
처음 디폴트 목록
오름차순 정렬
내림차순 정렬
전체소스
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바스립트 공부</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style>
ul.mylist, ol.mylist {
list-style: none;
margin: 0px;
padding: 0px;
max-width: 250px;
width: 100%;
}
ul.mylist li, ol.mylist li {
padding: 5px 0px 5px 5px;
margin-bottom: 5px;
border-bottom: 1px solid #efefef;
font-size: 12px;
}
ul.mylist li:last-child,
ol.mylist li:last-child {
border-bottom: 0px;
}
ul.mylist li:before,
ol.mylist li:before {
content: ">";
display: inline-block;
vertical-align: middle;
padding: 0px 5px 6px 0px;
}
</style>
</head>
<body>
<button onclick="javascript:fn_create_list('asc');">오름차순 정렬하기</button>
<button onclick="javascript:fn_create_list('desc');">내림차순 정렬하기</button>
<ul class="mylist"></ul>
<script>
//임의로 만든 배열 객체
let dummy = [
{'dt' : "2022-01-04", 'team' : 'C'}
, {'dt' : "2022-03-04", 'team' : 'B'}
, {'dt' : "2022-02-01", 'team' : 'C'}
, {'dt' : "2022-04-04", 'team' : 'D'}
, {'dt' : "2022-01-04", 'team' : 'A'}
, {'dt' : "2022-05-04", 'team' : 'A'}
, {'dt' : "2022-06-04", 'team' : 'D'}
, {'dt' : "2022-07-02", 'team' : 'C'}
]
//최초 생성
fn_create_list();
/*********************************
* @desc 오름차순으로 정렬하는 함수
*/
function fn_date_ascending(a, b) {
var dateA = new Date(a['dt']).getTime();
var dateB = new Date(b['dt']).getTime();
return dateA > dateB ? 1 : -1;
};
/*********************************
* @desc 내림차순으로 정렬하는 함수
*/
function fn_date_descending(a, b) {
var dateA = new Date(a['dt']).getTime();
var dateB = new Date(b['dt']).getTime();
return dateA < dateB ? 1 : -1;
};
/*********************************
* @desc 목록을 그리는 함수
*/
function fn_create_list(type){
//초기화
$('.mylist').empty();
//타입 변수가 없으면 기본 배열로 목록 생성
if( type == "" || type == null){
dummy.forEach(function(v,i){
$(".mylist").append("<li>"+v.dt+"</li>");
});
//내림차순일때
}else if( type == "desc"){
dummy.sort(fn_date_descending).forEach(function(v,i){
$(".mylist").append("<li>"+v.dt+"</li>");
});
//오름차순일때
}else{
dummy.sort(fn_date_ascending).forEach(function(v,i){
$(".mylist").append("<li>"+v.dt+"</li>");
});
}
}
</script>
</body>
</html>반응형