[jquery] li 태그의 data 속성을 이용해서 정렬하는 방법(jquery sort() 함수 사용)

어떤 경우에 사용했나? 

보통 리스트성 데이터는 DB에서 조회해서 가져올 때 'order by' 를 이용해서 정렬된 데이터를 가지고 옵니다. 

목록 데이터에 대한 정렬기준을 여러가지 제공하는 경우 매번 request를 요청하는건 불필요한 행위지요. 이럴 경우에는 jquery의 sort 함수를 이용해서 쉽게 정렬을 변경할 수 있습니다. 

 

html 기본구조

node.js에서 ejs 템플릿 엔진을 이용해서 html을 만든 예제입니다. 

정렬의 기준이 되는 데이터를 html의 data 속성을 이용해서 각 li 태그에 설정해놓아야 합니다.

(정렬을 위해 루프를 돌 때 정렬 기준 데이터를 가져올 수 있는 방법으로 세팅합니다.)

//테스트 목록
<ul id="testList">
<% for ( var i = 0; i < testList.length; i++){ %>
	<li data-creatdt="<%=(i + 1)%>" data-point="<%=testList[i].POINT%>">
		<h4><%=testList[i].TITLE%></h4>
	</li>
<% } %>
</ul>


//정렬 버튼
<button id="btnCreatDtOrder" class="w20p order color-red" data-datanm="creatdt">최신순</button>
<button id="btnPointOrder" class="w20p order" data-datanm="point">인기순</button>

 

javascript 부분

$("#btnCreatDtOrder, btnPointOrder").click(function(){
	var dataNm = $(this).data("datanm"); //data() 의 이름은 소문자로 작성
	listSort($(this), dataNm);
});

function listSort($targetObj, dataNm){
	//정렬하고자 하는 목록에 대해 sort 해서 다시 html로 뿌려주는 부분.
	$("#testList").html(
		$("#testList li").sort(function(a, b){
			return $(b).data(dataNm) - $(a).data(dataNm);
            //만약에 역순으로 정렬하고 싶은 경우 반대로 return하면 됩니다. 
            //return $(a).data(dataNm) - $(b).data(dataNm);
		})
	);

	//현재 정렬된 방식을 강조(표시)하기 위해 Class 제거 및 추가
	$(".order").removeClass("color-red");
	$targetObj.addClass("color-red");
}

 

sort 기능을 실제로 적용했던 화면

 

키워드인사이트 에서 연관키워드를 정렬하는 기능