[JSP] DataTables

🙏🏻 DataTables

 : 서버에서 가져온 데이터를 설정한 옵션에 맞게 그리드 형태로 그려주는 라이브러리

 

다시 설명하면 HTML의 <table>을 데이터그리드 형식으로 사용하기 위한 라이브러리를 의미합니다.

서버에서 데이터를 가져와 사용하기 때문에 대용량 데이터를 가져와 표시할 때는 속도저하의 이슈가 있을 수 있습니다.

 

페이지 정보, 표시 건수, 검색 조건 등의 데이터를 Parameter로 보낸 후 서버에서 정제하여 원하는 만큼의 데이터를 가져와 사용하기 위해서는 ServerSide 옵션을 사용합니다.

1) 표시 건수 제어 기능

2) 페이징 기능

3) 정렬 기능

4) 필터 기능

5) 스크롤 기능

Datatable을 사용하면 이러한 기능을 빠르게 구현할 수 있습니다.

또한 서버에서 JSON 데이터를 받아 표시할 수 있으며 표 디자인이 깔끔한 특징이 있습니다. 

var table = $("#table").DataTable({
    "ajax" : "ajax를 요청한 url",
    "columns" : [
        { "data" : "쿼리로 가져온 컬럼명",
          "render": function(data, type, row, meta) {
                return ... ;}
         }
        ]
     "columnsDef" : [
        { orderable:false, cloassName:'추가할 클래스명", targets : 칼럼의 인덱스번호}
     ]
    });

💡 참고

$(~~).prop("checked", false) 는 전체 체크값을 해제하라는 의미

val( ) 은 양식의 값을 가져오는 것

val(value)는 양식의 값을 설정하는 것

 

* classList

 : 읽기 전용 프로퍼티로 공백으로 구분된 문자열인 element.className을 통해 클래스 목록에 접근한느 방식을 대체하는 방법